States Transition when elements are removed

Question

I would like to write a transition where all the elements from State1 rotate around Y axis and then show elements from State2 This s illustrated in the dummy code below (just imagine Label 1 is a Group).

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
 <s:states>
  <s:State name="State1"/>
  <s:State name="State2"/>
 </s:states>
 <s:transitions>
  <s:Transition fromState="*" toState="State2" autoReverse="true">
   <s:Rotate3D target="{label2}" angleYFrom="-90" angleYTo="0" autoCenterTransform="true" duration="1000"/>
  </s:Transition>
 </s:transitions>
 <fx:Declarations>
  <s:Rotate3D id="phaseOut" target="{label1}" angleYFrom="0" angleYTo="90" autoCenterTransform="true" duration="1000" effectEnd="currentState='State2'" />
 </fx:Declarations>
 <s:Label id="label1" includeIn="State1" text="This is state 1" horizontalCenter="0" verticalCenter="0"/>
 <s:Label id="label2" includeIn="State2" text="This is state 2" horizontalCenter="0" verticalCenter="0"/>
 <s:Button label="Change" horizontalCenter="0" verticalCenter="30" click.State1="phaseOut.play()" click.State2="currentState='State1'"/>
</s:WindowedApplication>

My first problem is when the state transition is invoked, all elements from State1 are already gone, hence I have to split the transition in two hacks (see "phaseOut") This seems really poor since I am essentially rewritting the transition mechanism.
Q1: Is there a "clean" way to transition elements that do not belong to State2 ?

The second problem is when you revert back to State 1, elements have been rotated.
Q2: Is there such a thing as "autoReverse" for animations?

Thanks for your time!

Answer 1

Instead of doing two transitions, you can add the 'remove' filter to isolate an effect just on items being removed and use the RemoveChildAction to let the transition know when to execute the action to remove the items.

Info on RemoveChildAction:

http://livedocs.adobe.com/flex/3/langref/mx/effects/RemoveChildAction.html

Info on filters: http://livedocs.adobe.com/flex/3/langref/mx/effects/Effect.html#filter

Effects have a reverse method to play it in reverse: http://livedocs.adobe.com/flex/3/langref/mx/effects/Effect.html#reverse%28%29

Although I've heard mixed results from people about how successful it is.

Answer 2

Using viewstacks seems to do the trick nicely:

<?xml version="1.0" encoding="utf-8"?>
<s:Application 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:Declarations>
        <s:Rotate3D id="phaseOut" angleYFrom="0" angleYTo="90" duration="500" autoCenterTransform="true" />
        <s:Rotate3D id="phaseIn" angleYFrom="-90" angleYTo="0" duration="500" autoCenterTransform="true" startDelay="500" />
    </fx:Declarations>
    <mx:ViewStack id="viewstack1" width="200" height="200" horizontalCenter="0" verticalCenter="0">
        <s:NavigatorContent label="View 1" width="100%" height="100%" hideEffect="{phaseOut}" showEffect="{phaseIn}" >
            <s:Label id="label1" text="This is state 1" horizontalCenter="0" verticalCenter="0"/>
        </s:NavigatorContent>
        <s:NavigatorContent label="View 2" width="100%" height="100%"  hideEffect="{phaseOut}" showEffect="{phaseIn}">
            <s:Label id="label2" text="This is state 2" horizontalCenter="0" verticalCenter="0"/>
        </s:NavigatorContent>
    </mx:ViewStack>
    <s:Button label="Toggle" click="viewstack1.selectedIndex=(viewstack1.selectedIndex==0?1:0)"  horizontalCenter="0" top="10"/>
</s:Application>

The code is neat and the effect is exactely as expected