In Flex 4, state transition doesn't resize in

问题:

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

回答1:

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).

回答2:

autoreverseset to true must be redundant with your second transition. It already defines A to off. Just add a heightFromin the first transition.