There are a couple of ways you could make this work:
1) Simplest: make your triggered effects do the right thing (the appearing one waits for the disappearing one to finish, via a startDelay): <mx:WipeDown id="wipeDown" duration="700" /> <mx:WipeUp id="wipeUp" duration="700" startDelay="700"/> This would ensure that the wipeUp effect (which always runs on the component coming into view, in your example) will not run until the duration of the wipeDown (used for the disappearing component) is finished. 2) More involved: Use transitions Instead of triggers for these one-off effects, you could set up your application to use states for your components. in one state, the DataGrid would be there anre the List would not, in the other state the List would be there and the DataGrid would not. Then you could set up transitions for these states. It's a bit more involved, but might scale better than just running individual effects on the components. Chet. From: [email protected] [mailto:[email protected]] On Behalf Of gmoniey22 Sent: Wednesday, July 08, 2009 6:29 PM To: [email protected] Subject: [flexcoders] How to link effects so that one starts after one finishes? I have two components, and I want to swap between them using wipe down/up. i.e. click a button, the visible panel slides down, and after that panel is no longer visible, the other panel slides up and takes its place. I have tried something like the following (please excuse the crude example), but the effects occur at the same time, and it doesn't look that good. <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute"> <mx:Script> <![CDATA[ import mx.binding.utils.BindingUtils; [Bindable] private var _show:Boolean = true; private function swapShow(event:MouseEvent):void { _show = !_show; } ]]> </mx:Script> <mx:WipeDown id="wipeDown" duration="700" /> <mx:WipeUp id="wipeUp" duration="700" /> <mx:VBox> <mx:DataGrid visible="{_show}" includeInLayout="{_show}" showEffect="wipeUp" hideEffect="wipeDown" /> <mx:List visible="{!_show}" includeInLayout="{!_show}" showEffect="wipeUp" hideEffect="wipeDown"/> <mx:Button label="Swap" click="swapShow(event)" /> </mx:VBox> </mx:Application>
