2 Replies Latest reply on Jul 16, 2006 11:36 PM by henk_jan

    Toggle transitions doesn't work

    henk_jan
      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>
        • 1. Re: Toggle transitions doesn't work
          peterent Level 2
          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).
          • 2. Re: Toggle transitions doesn't work
            henk_jan Level 1
            Thank you Peter!
            It worked. I don't understand exacly what is happening because I would think that you first had to call removeChildAction and dissolve (of fade) to overcome that Flex first makes the content of the state correct, but it works and that what I wanted.

            By the way use both Dissolve and not fade :-). I just used 'fade' to explain my problem (sorry for my bad enlish :-)

            Henk Jan