Apache – State Transitions in Flex

I have a flex component with 2 states – "" (ie no name / default) and "Transactional" – and a bunch of transitions to move from one state to the other.

There is a button to toggle between the two states which calls the following function when clicked

public function ToggleState():void
{
    if (this.currentState=="Transactional")
    {
        this.currentState = "";
    }
    else
    {
        this.currentState = "Transactional";
    }

}

Everything works as expected unless you click on the button whilst the component is changing from one state to the other. After that things start going strange – some components that would previously fade out, no longer disappear. Others no longer re-appear

I suspect this is because the transitions don't complete properly and so the properties of the components being animated are not properly reset to the correct values.

I tried to put in some checks to tell if the state is changing (and hence disable the button whilst the transitions are playing) but the only events I could find to listen for were

enterState
currentStateChange
currentStateChanging

all of which are fired before the transitions are complete.

Does anyone know of any other suitable events to listen for or a better way of doing the state change?

UPDATE:

Here is the mxml I am using for the transitions

<transitions>
    <mx:Transition fromState="" toState="Transactional">
        <mx:Sequence>
            <mx:Parallel>
                <mx:AnimateProperty target="{Controller}" property="y" fromValue="-60" toValue="-1" duration="600" />
                <mx:AnimateProperty target="{Environment}" property="y" fromValue="156" toValue="46" />
                <mx:AnimateProperty target="{ProfitAndLoss}" property="y" fromValue="156" toValue="126" />
                <mx:AnimateProperty target="{Summary}" property="y" fromValue="156" toValue="56" />
                <mx:AnimateProperty target="{Assets_Container}" property="x" fromValue="266" toValue="246" />
                <mx:AnimateProperty target="{Liabilities_Container}" property="x" fromValue="425" toValue="505" />
                <mx:Fade target="{TransactionalBackgroundImage}" alphaFrom="0" alphaTo="1" />
            </mx:Parallel>
            <mx:AnimateProperty target="{Summary}" property="x" fromValue="42" toValue="256" />
        </mx:Sequence>
    </mx:Transition>
    <mx:Transition fromState="Transactional" toState="">
        <mx:Sequence>
            <mx:AnimateProperty target="{Summary}" property="x" fromValue="256" toValue="42" />
            <mx:Parallel>
                <mx:AnimateProperty target="{Controller}" property="y" fromValue="-1" toValue="-60" />
                <mx:AnimateProperty target="{Environment}" property="y" toValue="156" fromValue="46" />
                <mx:AnimateProperty target="{ProfitAndLoss}" property="y" toValue="156" fromValue="126" />
                <mx:AnimateProperty target="{Summary}" property="y" toValue="156" fromValue="56" />
                <mx:AnimateProperty target="{Assets_Container}" property="x" fromValue="246" toValue="266" />
                <mx:AnimateProperty target="{Liabilities_Container}" property="x" fromValue="505" toValue="425" />
                <mx:Fade target="{TransactionalBackgroundImage}" alphaFrom="0" alphaTo="0" />
            </mx:Parallel>
        </mx:Sequence>
    </mx:Transition>
</transitions>