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:VGro开发者_开发技巧up>
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).
autoreverse
set to true must be redundant with your second transition. It already defines A to off. Just add a heightFrom
in the first transition.
精彩评论