Toggle transitions doesn't work

Question

Hi,
I try to make a fade in/ fade out effect using transitions. I
have 2 states: default state and a detail state.
When I call the detail state I use a dissolve transition to
'fade in' the detail state. This works fine.
But when I go back to my default state the detail state just
disappears without a fade out.
Does anyone know what I'm doing wrong?
This is my transition code:
<mx:states>
<mx:State name="UserDetail">
</mx:State>
</mx:states>
<mx:transitions>
<mx:Transition id="openDetail" fromState="*"
toState="UserDetail">
<mx:Parallel target="{csUserDetail}">
<mx:Dissolve alphaFrom="0.0" alphaTo="1.0"
duration="1000"/>
</mx:Parallel>
</mx:Transition>
<mx:Transition id="closeDetail" fromState="UserDetail"
toState="*">
<mx:Parallel target="{csUserDetail}">
<mx:Fade alphaFrom="1.0" alphaTo="0.0"
duration="1000"/>
</mx:Parallel>
</mx:Transition>
</mx:transitions>

Answer 1

First off, Fade and Dissolve are two different things. I
think you want to use Fade for both or Dissolve for both. But
that's just a matter of taste.
You didn't supply your state details, but I'm betting you
have an AddChild in there.
What's happening is the when you go from UserDetail state
back to the base state, Flex is first going to make the content of
the state be correct - this means undoing the AddChild and thus the
contents of the UserDetail state just pops away.
Change your closeDetail transition to this:
<mx:Transition fromState="UserDetail" toState="">
<mx:Sequence target="{csUserDetail}">
<mx:Fade ... />
<mx:RemoveChildAction />
</mx:Sequence>
</mx:Transition>
You want the events to happen in sequence: first fade out
csUserDetail, then remove it. Since the Fade and RemoveChildAction
apply to csUserDetail you can just put the target on the Sequence
and leave it off of the Fade and RemoveChildAction tags (or you can
put it on both of them if you have other targets).