state的动态切换(页面间加上动态效果)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            import flash.events.MouseEvent;
            internal function changeState(event:MouseEvent):void{
                if(this.currentState=="detail"){  //currentState属性代表了目前的状态，
                    this.currentState="";
                    btnLinkButton.label="了解详情";
                }else{
                    this.currentState="detail";
                    btnLinkButton.label="返回简介";
                }
            }
            
        ]]>
    </mx:Script>
    <mx:transitions>
        <!-- 当状态切换符合Transition的条件，即切换前后的状态和fromState  toState都相等时，形变动画就开始播放  -->
        <mx:Transition fromState="" toState="detail">
            <mx:Parallel target="{ControlPanel}" duration="2000">
                <mx:WipeDown></mx:WipeDown>
                <mx:Blur blurXFrom="10" blurXTo="0"></mx:Blur>
            </mx:Parallel>
        </mx:Transition>
        <mx:Transition fromState="detail" toState="">
            <mx:Parallel target="{ControlPanel}" duration="2000">
                <mx:WipeUp></mx:WipeUp>
                <mx:Blur blurXFrom="10" blurXTo="0"></mx:Blur>
            </mx:Parallel>
        </mx:Transition>
    </mx:transitions>
    <mx:states>
        <mx:State name="detail">
            <!-- 向对象添加一个子级元素  -->
            <mx:AddChild relativeTo="{ControlPanel}" position="lastChild" creationPolicy="all">
                <mx:Text width="100%">
                    <mx:htmlText>
                        <![CDATA[
                            美女啊！美女啊！美女啊！美女啊！美女啊！美女啊！美女啊！美女啊！美女啊！美女啊！美女啊！美女啊！美女啊！美女啊！美女啊！
                            美女啊！美女啊！美女啊！美女啊！美女啊！美女啊！美女啊！美女啊！美女啊！美女啊！美女啊！美女啊！美女啊！美女啊！美女啊！
                        ]]>
                    </mx:htmlText>
                </mx:Text>
            </mx:AddChild>
            <!-- 设置对象的属性   -->
            <mx:SetProperty target="{ControlPanel}" name="title" value="详细情况"></mx:SetProperty>
            <!--  设置对象某一事件的监听方法  -->
            <mx:SetEventHandler target="{btnLinkButton}" name="click" handlerFunction="changeState"></mx:SetEventHandler>
            <!-- 设置对象的样式  -->
            <mx:SetStyle target="{btnLinkButton}" name="color" value="#990000"></mx:SetStyle>
            <!-- 删除一个子级元素  -->
            <mx:RemoveChild target="{image}"></mx:RemoveChild>
        </mx:State>
    </mx:states>
    <mx:Panel x="10" y="10" width="399" height="312" layout="absolute" id="ControlPanel" title="状态的改变">
        <mx:Image x="10" y="10" source="img/5.jpg" width="128" height="189" id="image"/>
        <mx:ControlBar>
            <mx:LinkButton label="了解详情" id="btnLinkButton" click="changeState(event)"/>
        </mx:ControlBar>
    </mx:Panel>
    
</mx:Application>