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 >