Flex 4 Easy Way To Transition Between States - apache-flex

Question

Is there an easy way, using only MXML, to transition between states that add and remove elements.
For example:
<s:Group includeIn="state1"/>
<s:Group includeIn="state2"/>
Can MXML transitions slide state1 out and state2 in, for example?
Thank you.

Answer 1

In addition to the link posted above here's a way to apply a single transition to multiple targets:
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:views="views.*" >
<s:states>
<s:State name="home"/>
<s:State name="help"/>
<s:State name="instructions"/>
<s:State name="settings"/>
<s:State name="feedback"/>
</s:states>
<s:transitions>
<s:Transition fromState="*" toState="*" >
<s:Sequence >
<s:Wipe direction="right" duration="350" target="{this}"/>
</s:Sequence>
</s:Transition>
</s:transitions>
<views:Home id="home" includeIn="home" width="100%" height="100%" ownerComponent="{this}"/>
<views:Help id="help" includeIn="help" width="100%" height="100%" ownerComponent="{this}" />
<views:Instructions id="instructions" includeIn="instructions" width="100%" height="100%" ownerComponent="{this}" />
<views:Settings id="settings" includeIn="settings" width="100%" height="100%" ownerComponent="{this}" />
<views:Feedback id="feedback" includeIn="feedback" width="100%" height="100%" ownerComponent="{this}" />
</s:Group>
The previous transition creates a wipe from one direction to the other.
The next transition fades from one view to another:
<s:transitions>
<s:Transition fromState="*" toState="home" >
<s:Sequence >
<s:Fade target="{this}" alphaFrom="1" alphaTo="0"/>
<s:RemoveAction targets="{[home,help,instructions,settings,feedback]}"/>
<s:AddAction target="{home}"/>
<s:Fade target="{this}" alphaFrom="0" alphaTo="1"/>
</s:Sequence>
</s:Transition>
</s:transitions>
The next slides one view in while sliding the rest out:
<s:transitions>
<s:Transition fromState="*" toState="home" >
<s:Sequence duration="1000" >
<s:Parallel>
<s:Move applyChangesPostLayout="true" targets="{notHomeTargets}" xFrom="0" xTo="{-width}"/>
<s:AddAction target="{home}" />
<s:Move applyChangesPostLayout="true" target="{home}" xFrom="{width}" xTo="0"/>
</s:Parallel>
<s:RemoveAction targets="{targets}" />
</s:Sequence>
</s:Transition>
</s:transitions>
You would have to create one for each state with the last examples.