Why is this Flex 4 Transition not working?

Question

I have a test application here which was made using the following code:

<fx:Script>
    <![CDATA[

            public function comboBoxHandler():void{
                var selectedItem:String = showComboBox.selectedItem;

                if(selectedItem == "All results"){
                    currentState = "default";
                    return;
                }else if(selectedItem == "Only results within tags"){
                    currentState = "tagInput";
                    return;
                }
            }

    ]]>
</fx:Script>    
<s:states>
    <s:State name="default"/>
    <s:State name="tagInput"/>
</s:states>
<s:transitions>
    <s:Transition id="showTagTextInput" fromState="default" toState="tagInput">
        <s:Sequence id="t1p1" targets="{[tagsLabel,tagsTextInput,GoButton]}">

            <s:Move  duration="700"/>
            <s:Fade  duration="400"/>

        </s:Sequence>
    </s:Transition>
    <s:Transition id="hideTagTextInput" fromState="tagInput" toState="default">
        <s:Sequence id="t2p1" targets="{[tagsLabel,tagsTextInput,GoButton]}" >

            <s:Fade  duration="400"/>
            <s:Move  duration="700"/>

        </s:Sequence>
    </s:Transition>

</s:transitions>

<s:Label x="136" y="13" width="120" height="34" fontFamily="Arial" fontSize="15"
             text="Lessons&#xd;Learnt" textAlign="center"/>

    <s:Group id="group" width="100%" height="100%"
             x.default="0" y.default="55" width.default="400" height.default="231"
             y.tagInput="55" height.tagInput="256">
        <s:Label x="45" y="38" width="50" height="22" text="Search" textAlign="center"
                 verticalAlign="middle"/>
        <s:TextInput x="103" y="38" width="193"
                     useHandCursor.tagInput="false"/>
        <s:Label x="45" y="89" width="51" height="22" text="Show" textAlign="center"
                 verticalAlign="middle"/>
        <s:Button id="GoButton" x="253" y="137" width="43" label="Go" useHandCursor="true"
                  buttonMode="true" mouseChildren="false"
                  x.tagInput="254" y.tagInput="188"/>
        <s:DropDownList id="showComboBox" x="104" y="89" width="192" change="comboBoxHandler();"
                    selectedIndex="0">
            <s:ArrayCollection>
                <fx:String>All results</fx:String>
                <fx:String>Only results within tags</fx:String>
            </s:ArrayCollection>
        </s:DropDownList>
        <s:Label id="tagsLabel" includeIn="tagInput" x="104" y="146" width="61" height="20" text="Tags"
                 textAlign="center" verticalAlign="middle"/>
        <s:TextInput id="tagsTextInput" includeIn="tagInput" x="173" y="146" width="123"/>

    </s:Group>

You can check, by clicking the link I gave, that this app performs some basic transition effect when you select different options from the DropDownBox.

The first (show) transition doesn't work so well, but the second (hide) transition does.

Does anyone know how to fix that? In the first transition, I would like the button to slide down first, only after that should the text input fade In. Why isn't this working?

Thanks in advance.

Answer 1

It is better to point particular effect target rather that pointing all the targets in <s:Sequence />. So place targets to <s:Move /> and <s:Fade />. Also you can perform additional transitions tuning by placing <s:AddAction /> and <s:RemoveAction /> with corresponding targets to point a place within sequence where transition should invoke includeIn and excludeFrom states declarations.

So these transitions works fine with your code:

<s:transitions>
    <s:Transition fromState="default" id="showTagTextInput" toState="tagInput">
        <s:Sequence id="t1p1">
            <s:Move duration="700" targets="{[GoButton]}" />
            <s:AddAction targets="{[tagsLabel,tagsTextInput]}" />
            <s:Fade duration="400" targets="{[tagsLabel,tagsTextInput]}" />
        </s:Sequence>
    </s:Transition>
    <s:Transition fromState="tagInput" id="hideTagTextInput" toState="default">
        <s:Sequence id="t2p1">
            <s:Fade duration="400" targets="{[tagsLabel,tagsTextInput]}" />
            <s:RemoveAction targets="{[tagsLabel,tagsTextInput]}" />
            <s:Move duration="700" targets="{[GoButton]}" />
        </s:Sequence>
    </s:Transition>
</s:transitions>