在Flex 4中，状态转换不会在两个方向上调整大小 [英] In Flex 4, state transition doesn't resize in both directions

问题描述

我有两个状态。当我从OFF切换到A时，它调整正确，但是当我从A切换回OFF时，没有平滑调整大小的转换。

这是我的代码：

 < ;？xml version =1.0encoding =utf-8？> 
  xmlns：s =library：//ns.adobe.com/flex/spark 
 xmlns：mx =library：//ns.adobe.com/flex/mx> 
 
< fx：Script> 
<！[CDATA [
 protected function butA_changeHandler（e：Event）：void 
 {
 if（（e.target as ToggleButton）.selected）{
 this.currentState = A; 
} else {
 this.currentState =off; 
} 
} 
]]> 
< / fx：Script> 
 
< s：州> 
 < s：国家名称=A/> 
< / s：州> 
 
< s：转换> 
 < s：Parallel duration =300> 
 < s：Fade targets ={cA}/> 
< / s：Parallel> 
< / s：转换> 
 < s：Parallel duration =300> 
< s：Resize target ={content}heightTo =0/> 
< s：Fade targets ={cA}/> 
< / s：Parallel> 
< / s：转换> 
< / s：转换> 
 
  < / s：Group> 
 
< s：HGroup> 
 < / s：HGroup> 
 
< / s：VGroup> 
  

在此先感谢，
Nuno

。

pre> < S：过渡>
< s：序列>
< s：AddAction target ={content}/>
< s：Parallel duration =300>
< s：Fade targets ={cA}/>
< / s：Parallel>
< / s：序列>

< / s：转换>
< s：序列>
< s：Parallel duration =300>
< s：Resize target ={content}heightTo =0/>
< s：Fade targets ={cA}/>
< / s：Parallel>
< s：RemoveAction target ={content}/>
< / s：序列>
< / s：转换>
< / s：转换>

< / s：Group>


使用heightFrom和widthFrom从所需的维度开始调整大小，注意：使用includeIn =A意味着你也暗示了conent将具有excludeFrom =OFF属性。这意味着你将不能混合添加/删除行为和includeIn / excludeFrom（一个用于添加视图，另一个用于删除它们）。

I have two states. When I switch from OFF to A, it resizes correctly, but when I switch from A back to OFF it happens without the smooth resize transition. What am I doing wrong?

Here's my code:

<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx">

  <fx:Script>
    <![CDATA[
      protected function butA_changeHandler(e:Event):void
      {       
        if ((e.target as ToggleButton).selected) {
          this.currentState="A";
        } else {
          this.currentState="off";
        }
      }
    ]]>
  </fx:Script>

  <s:states>
    <s:State name="off" />
    <s:State name="A" />
  </s:states>

  <s:transitions>
    <s:Transition fromState="off" toState="A" autoReverse="true">
      <s:Parallel duration="300">
        <s:Resize target="{content}" heightTo="{cA.height}" />
        <s:Fade targets="{cA}"/>
      </s:Parallel>
    </s:Transition>
    <s:Transition fromState="A" toState="off" autoReverse="true">
      <s:Parallel duration="300">
        <s:Resize target="{content}" heightTo="0" />
        <s:Fade targets="{cA}"/>
      </s:Parallel>
    </s:Transition>
  </s:transitions>

  <s:Group id="content" excludeFrom="off" width="100%" clipAndEnableScrolling="true">   
    <s:Group id="cA" includeIn="A" width="100%"><s:Label fontSize="70" text="A"/></s:Group>
  </s:Group>

  <s:HGroup>
    <s:ToggleButton id="butA" label="A" change="butA_changeHandler(event)"/>
  </s:HGroup>

</s:VGroup>

Thanks in advance, Nuno

解决方案

You should be using both AddAction and RemoveAction as the includeIn and excludeFrom properties are processed before transitions: .

<s:transitions>
        <s:Transition fromState="off" toState="A" autoReverse="true">
            <s:Sequence>
                <s:AddAction target="{content}" />
                <s:Parallel duration="300">
                    <s:Resize target="{content}" heightTo="{cA.height}" />
                    <s:Fade targets="{cA}"/>
                </s:Parallel>
            </s:Sequence>

        </s:Transition>
        <s:Transition fromState="A" toState="off" autoReverse="true">
            <s:Sequence>
                <s:Parallel duration="300">
                    <s:Resize target="{content}" heightTo="0" />
                    <s:Fade targets="{cA}"/>
                </s:Parallel>
                <s:RemoveAction target="{content}" />
            </s:Sequence>
        </s:Transition>
    </s:transitions>

    <s:Group id="content" width="100%" clipAndEnableScrolling="true">   
        <s:Group id="cA" includeIn="A" width="100%"><s:Label fontSize="70" text="A"/></s:Group>
    </s:Group>

Start the resizes off from the dimensions you want using heightFrom and widthFrom so that they actually animate.

*Note: Using an includeIn="A" means you are also implying that conent will have the excludeFrom="OFF" property. This means you won't be able to mix Add/RemoveAction and includeIn/excludeFrom (one for adding views and another for removing them).

这篇关于在Flex 4中，状态转换不会在两个方向上调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！