Use Transition to add and remove controls dynamically

         
<?xml version="1.0" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#FFFFFF">  
  
  <mx:transitions>
    <mx:Transition  fromState="" toState="Description">
       <mx:Sequence target="{vbox1}">
         <mx:Resize duration="500"/>
         <mx:SetPropertyAction name="visible" target="{prodDesc}" value="true" startDelay="500"/>
       </mx:Sequence>
    </mx:Transition>
    <mx:Transition  fromState="Description" toState="">
       <mx:Sequence target="{vbox1}">
         <mx:SetPropertyAction name="visible" target="{prodDesc}" value="false" startDelay="500"/>
         <mx:Resize duration="500"/>
       </mx:Sequence>
    </mx:Transition>
  </mx:transitions>
  
  <mx:states>
    <mx:State name="Description">
      <mx:AddChild relativeTo="{hbox1}" position="before">
        <mx:TextArea width="200" height="180" id="prodDesc" borderStyle="none" visible="false" text="this is a test"/>
      </mx:AddChild>
      <mx:RemoveChild target="{descButton}"/>
      <mx:AddChild relativeTo="{hbox1}" position="before">
        <mx:Button label="Close Description" click="this.currentState=''"/>
      </mx:AddChild>
    </mx:State>
  </mx:states>
  
  <mx:VBox id="vbox1">
    <mx:Label id="productNameTxt" text="Product Name" fontWeight="bold" />
    <mx:Button label="Open Description" click="this.currentState='Description'" id="descButton"/>
    <mx:HBox id="hbox1">
        <mx:Button label="Add to Cart" id="addBtn"/>
    </mx:HBox>
  </mx:VBox>
</mx:Application>

1.	Wrap Parallel, fade and move with Transition
2.	Define transitions for this example in MXML using the tag
3.	Set control to invisible during transition
4.	Using a filter in Transition
5.	Advanced Transitions: Move, Rotate, Resize
6.	Transitions with tag
7.	Transition With Blurs
8.	Action Transitions
9.	Custom AnimateTransitionShader Transform
10.	Using a filter
11.	Defining a custom filter
12.	Change button position and fade button

Use Transition to add and remove controls dynamically : Transition « Effects « Flex

Related examples in the same category