[flexcoders] Transition changing z-order before transition effect starts

[Daniel Freiman]

I'm working with transitions. I'm trying apply an effect to a component,
then removing children, replacing children, and then applying another effect
to the component.  This is working except that before the first effect
plays, the child indexes/z-order get all screwed up.  Since I'm using a
ControlBar\HBox, this looks as if the children are randomly switching places
before the transition.  Anyone have any idea what's going on here?  (Moxie
B2).

<?xml version="1.0" encoding="utf-8"?>
<mx:ControlBar xmlns:mx="http://www.adobe.com/2006/mxml";>
<mx:Script>
    <![CDATA[
        import mx.effects.WipeLeft;
        public function radioChange(event:Event):void {
            //dispatchEvent(new Event((TimeSet.selectedValue.toString() as
String).toLowerCase()));
        }

        public function configure(event:MouseEvent):void {
            currentState = "EditState";
            trace("configure");
        }

        public function unConfigure(event:MouseEvent):void {
            currentState = "";
            trace("unconfigure");
        }
    ]]>
</mx:Script>
    <mx:states>
        <mx:State name="EditState">
            <mx:RemoveChild target="{button1}"/>
            <mx:RemoveChild target="{vrule1}"/>
            <mx:RemoveChild target="{radiobutton1}"/>
            <mx:RemoveChild target="{radiobutton2}"/>
            <mx:RemoveChild target="{radiobutton3}"/>
            <mx:RemoveChild target="{vrule2}"/>
            <mx:RemoveChild target="{radiobutton4}"/>
            <mx:RemoveChild target="{radiobutton5}"/>
            <mx:RemoveChild target="{vrule3}"/>
            <mx:RemoveChild target="{label1}"/>
            <mx:RemoveChild target="{datefield1}"/>
            <mx:AddChild position="lastChild">
                <mx:Button id="unconfigureButton" label="Return to Store
Front" click="unConfigure(event);"/>
            </mx:AddChild>
            <mx:AddChild position="lastChild">
                <mx:PopUpMenuButton id="addZoneButton" label="Add Zone"/>
            </mx:AddChild>
            <mx:AddChild position="lastChild">
                <mx:Button id="removeZoneButton" label="Remove Current
Zone"/>
            </mx:AddChild>
            <mx:AddChild position="lastChild">
                <mx:Button id="addPositionButton" label="Add Position"/>
            </mx:AddChild>
            <mx:AddChild position="lastChild">
                <mx:PopUpMenuButton id="removePositionButton" label="Remove
Position"/>
            </mx:AddChild>
            <mx:AddChild position="lastChild" >
                <mx:PopUpMenuButton id="addCategoryButton" label="Add
Category"/>
            </mx:AddChild>
            <mx:AddChild position="lastChild">
                <mx:PopUpMenuButton id="removeCategoryButton" label="Remove
Category"/>
            </mx:AddChild>
        </mx:State>
    </mx:states>

    <mx:transitions>
        <mx:Transition fromState="*" toState="EditState">
            <mx:Sequence targets="{[button1, vrule1, radiobutton1,
radiobutton2, radiobutton3, vrule2, radiobutton4, radiobutton5, vrule3,
label1, datefield1, unconfigureButton, addZoneButton, removeZoneButton,
addPositionButton, removePositionButton, addCategoryButton,
removeCategoryButton]}" >
                <mx:WipeLeft showTarget="false" target="{this}"
duration="5000"/>
                <mx:RemoveChildAction/>
                <mx:AddChildAction/>
                <mx:WipeRight showTarget="true" target="{this}"/>
            </mx:Sequence>
        </mx:Transition>
        <mx:Transition fromState="EditState" toState="*">
            <mx:Sequence targets="{[button1, vrule1, radiobutton1,
radiobutton2, radiobutton3, vrule2, radiobutton4, radiobutton5, vrule3,
label1, datefield1, unconfigureButton, addZoneButton, removeZoneButton,
addPositionButton, removePositionButton, addCategoryButton,
removeCategoryButton]}" >
                <mx:WipeLeft showTarget="false" target="{this}"
duration="5000"/>
                <mx:RemoveChildAction/>
                <mx:AddChildAction/>
                <mx:WipeRight showTarget="true" target="{this}"/>
            </mx:Sequence>
        </mx:Transition>
    </mx:transitions>

    <mx:Button label="Configure Store Front" click="configure(event)"
id="button1"/>
    <mx:VRule minHeight="0" height="22" alpha="0.5" id="vrule1"/>
    <mx:RadioButton label="Breakfast" groupName="TimeSet" selected="true"
id="radiobutton1"/>
    <mx:RadioButton label="Lunch" groupName="TimeSet" id="radiobutton2"/>
    <mx:RadioButton label="Night" groupName="TimeSet" id="radiobutton3"/>
    <mx:VRule minHeight="0" height="22" alpha="0.5" id="vrule2"/>
    <mx:RadioButton label="Approved" groupName="viewableSet" selected="true"
id="radiobutton4"/>
    <mx:RadioButton label="Working" groupName="viewableSet"
id="radiobutton5"/>
    <mx:VRule minHeight="0" height="22"  alpha="0.5" id="vrule3"/>
    <mx:Label text="Last Approved" id="label1"/>
    <mx:DateField editable="false" mouseEnabled="false"
mouseChildren="false" id="datefield1"/>
</mx:ControlBar>