??? 在上一个单组件改变状态效果的基础上，增加至两个组件之间的切换，更好的理解其中的关联，下次有时间把他们之间的关系总结一下！
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
????styleName="applicationcenter" currentState="pan1_state">
?<mx:states>
??<mx:State name="pan1_state">
???<mx:SetEventHandler target="{but1}" name="click" handler="currentState='pan2_state'"/>
??</mx:State>
??<mx:State name="pan2_state">
???<mx:RemoveChild target="{pan1}"/>
???<mx:AddChild relativeTo="{canvas1}" position="lastChild">
????<mx:Panel x="46" y="23" width="250" height="200" layout="absolute" id="pan2" title="pan2">
?????<mx:Button x="82" y="58" label="but2" id="but2" click="currentState='pan1_state'"/>
????</mx:Panel>
???</mx:AddChild>
??</mx:State>
?</mx:states>
?<mx:Style source="css/css.css"/>
?<mx:Canvas width="352" height="260" borderColor="#A42B2B" borderStyle="solid" borderThickness="5" id="canvas1">
??<mx:Panel x="46" y="23" width="250" height="200" layout="absolute" title="pan1" id="pan1">
???<mx:Button x="82" y="58" label="but1" id="but1"/>
??</mx:Panel>
?</mx:Canvas>
?
?<mx:transitions>
??<mx:Transition fromState="pan1_state" toState="pan2_state">
???<mx:Sequence>
????<mx:WipeLeft target="{pan1}" showTarget="false"/>
????<mx:RemoveChildAction target="{pan1}"/>
????<mx:AddChildAction target="{pan2}"/>
????<mx:WipeRight target="{pan2}"/>
???</mx:Sequence>
??</mx:Transition>
??<mx:Transition fromState="pan2_state" toState="pan1_state">
???<mx:Sequence target="{pan2}">
????<mx:WipeLeft showTarget="false"/>
????<mx:RemoveChildAction target="{pan2}"/>
????<mx:AddChildAction target="{pan1}"/>
????<mx:WipeRight target="{pan1}"/>
???</mx:Sequence>
??</mx:Transition>
?</mx:transitions>
?
</mx:Application>