transitions过度states效果代码

<?xml version="1.0" ?>
<!-- transitions\LoginFormTransition.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark">
    
    <!-- The Application class states property defines the view states.-->
    <s:states>
        <s:State name="default"/>    
        <s:State name="Register"/>
    </s:states>
 
    <!-- Define the transition to animate the change of view state. -->
    <s:transitions>
       <s:Transition fromState="default">
            <s:Parallel>
                <s:Wipe direction="right" target="{confirm}"/>
                <s:Resize target="{loginPanel}" duration="100"/>
            </s:Parallel> 
        </s:Transition>
       <s:Transition fromState="Register">
            <s:Sequence>
                <s:Resize target="{loginPanel}" duration="100"/>
            </s:Sequence>
        </s:Transition>
    </s:transitions>
        
    <!-- Set title of the Panel container based on the view state.-->
    <s:Panel id="loginPanel" 
        title="Login" title.Register="Register">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>        
        <s:Form id="loginForm">
            <s:FormItem label="Username:">
                <s:TextInput/>
            </s:FormItem>
            <s:FormItem label="Password:">
                <s:TextInput/>
            </s:FormItem>
            <!-- Add a TextInput control to the form for the Register view state. -->
            <s:FormItem id="confirm" label="Confirm:" includeIn="Register">
                <s:TextInput id="myTI"/>
            </s:FormItem>            
            <s:FormItem>
                <!-- Use the LinkButton to change to the Register view state.-->
                <!-- Exclude the LinkButton from the Register view state.-->    
                <!-- Add a LinkButton to the form for the Register view state. -->
                <mx:LinkButton label="Return to Login" 
                    includeIn="Register"
                    click="currentState=''"/>
                <mx:LinkButton id="registerLink"
                    includeIn="default" 
                    label="Need to Register?" 
                    click="currentState='Register'"/>
                <s:Button id="loginButton" 
                    label="Login" label.Register="Register"/>
            </s:FormItem>            
        </s:Form>
    </s:Panel>
</s:Application>

 效果为:当点击Need to Register?的时候,confirm表单从左向右渐渐出现

参考:http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf600c1-7fff.html