state transition整合总结二 多组件改变

    在上一个单组件改变状态效果的基础上，增加至两个组件之间的切换，更好的理解其中的关联，下次有时间把他们之间的关系总结一下！

<?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>