Panel Transition Problem

Question

Hey All,
I am having problems applying transitions on my custom
components. So I decided to start from scratch with a stock panel
component and apply a transition to that then work my way up.
Unfortunately I can't even get that to work. Here is my code for
the panel and its transition... really basic but it just isn't
working. The panel simply dissapears without the fade effect. Any
pointers?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:states>
<mx:State name="state2">
<mx:RemoveChild target="{panel1}"/>
<mx:SetEventHandler target="{button1}" name="click"
handler="currentState=''"/>
</mx:State>
</mx:states>
<mx:transitions>
<mx:Transition fromState="" toState="state2">
<mx:Fade duration="1000" target="{panel1}"/>
</mx:Transition>
</mx:transitions>
<mx:Panel width="250" height="200" layout="absolute"
id="panel1">
</mx:Panel>
<mx:Button label="Change State"
click="currentState='state2'" id="button1"/>
</mx:Application>

Answer 1

The problem is the RemoveChild in the state. When you change
the state it immediately executes the RemoveChild and boom, your
Panel is gone.
Do you really want to remove the Panel in the new state?
That's OK, but if you don't need to remove it, don't bother. But
let's assume you do, what you want the transition to do is fade out
the Panel and THEN remove it. I think this will work:
<mx:transitions>
<mx:Transition fromState="" toState="state2">
<mx:Sequence>
<mx:Fade duration="1000" target="{panel1}"/>
<mx:RemoveChildAction target="{panel1}" />
</mx:Sequence>
</mx:Transition>
</mx:transitions>
The Sequence effect will first run the fade, then it will
remove the Panel.