面板移动效果（sates）

<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">
    <!-- 定义状态 -->
    <s:states>
        <s:State name="Default"/>
        <s:State name="One"/>
        <s:State name="Two"/>
    </s:states>    
    <!-- 定义过渡 -->
    <s:transitions>
        <mx:Transition fromState="*" toState="*">
            <mx:Sequence id="t1" targets="{[p1,p2,p3]}">
                <mx:Parallel>
                    <s:Move  duration="400"/>
                    <s:Resize duration="400"/>
                </mx:Parallel>  
            </mx:Sequence>
        </mx:Transition>
    </s:transitions>    
    <s:Group id="pm" width="100%" height="100%" >
        <s:Panel id="p1" title="查询"
                 x="0" y="0"
                 x.One="110"
                 width="100" height="100"
                 width.One="200" height.One="210"
                 click="currentState='One'" >
            <s:Label fontSize="24" text="One"/>
        </s:Panel>
        <s:Panel id="p2" title="添加"
                 x="0" y="110"
                 y.One="0"
                 x.Two="110" y.Two="0"
                 width="100" height="100"
                 width.Two="200" height.Two="210"
                 click="currentState='Two'" >
            <s:Label fontSize="24" text="Two"/>
        </s:Panel>
        <s:Panel id="p3" title="删除"
                 x="110" y="0"
                 x.One="0" y.One="110"
                 x.Two="0" y.Two="110"
                 width="200" height="210"
                 width.One="100" height.One="100"
                 width.Two="100" height.Two="100"
                 click="currentState=''" >
            <s:Label fontSize="24" text="Three"/>
        </s:Panel>
    </s:Group>
</s:Application>