Flex 4 Slidedown Effect

I am attempting to recreate an effect that I found on (another site. When you hover over the gray header area a slide down menu is displayed.

The issue that I am having is that when I mouse over the area, the hiddenNav container instantly appears and does not have the nice move effect.

Here is my current code

<?xml version="1.0"?>
<!-- Simple example to demonstrate the WipeDown effect. -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:mx1="library://ns.adobe.com/flex/mx" currentState="normalMenu">
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<fx:Script>
    <![CDATA[
        protected function expandSubNavigation(event:MouseEvent):void
        {
            cur开发者_开发百科rentState=(currentState == 'hiddenMenu') ? 'normalMenu' : 'hiddenMenu';
        }       
    ]]>
</fx:Script>


<s:states>
    <s:State name="normalMenu"/>
    <s:State name="hiddenMenu"/>
</s:states>


<s:transitions>
    <s:Transition id="myTransition" fromState="*" toState="*" >
        <s:Parallel id="t1" targets="{[visibleNav,hiddenNav]}">
            <s:Move  duration="600"/>
        </s:Parallel>
    </s:Transition>
</s:transitions>

<s:BorderContainer x="0" y="0" width="100%" mouseOver="expandSubNavigation(event)" height="32" borderVisible="false" backgroundColor="#848484" >
    <s:Label x="30" text="Lorem Ipsum" verticalCenter="0" color="#FFFFFF"/>
</s:BorderContainer>


<s:HGroup x="0" y="33" id="visibleNav" width="100%" height="24" gap="0">
    <s:BorderContainer width="200" height="100%" borderVisible="false" backgroundColor="#227258" >
        <s:Label text="Ipsum: " verticalCenter="0" left="10" color="#FFFFFF" fontSize="10"/>
    </s:BorderContainer>        
    <s:BorderContainer width="100%" height="24" borderVisible="false" backgroundColor="#005C3F" >
    </s:BorderContainer>
</s:HGroup>

<s:Group id="hiddenNav" alpha="0.9" x="0" y="0" y.hiddenMenu="33" includeIn="hiddenMenu" width="100%" height="50">
    <s:BorderContainer width="100%" height="25" borderVisible="false" backgroundColor="#00110B" backgroundAlpha="0.9" y="0" x="0">
        <s:Label text="Lorem Ipsum" x="0" y="0" color="0xFFFFFF"/>
    </s:BorderContainer>
    <s:BorderContainer width="100%" height="25" borderVisible="false" backgroundAlpha="0.9" backgroundColor="#333333" left="0" borderAlpha="0.9" y="25">
    </s:BorderContainer>
</s:Group>
    </s:Application>

problem was in targets attribute - it's useless to mention a Group there, here's your code fixed:

<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the WipeDown effect. -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:mx1="library://ns.adobe.com/flex/mx" currentState="normalMenu">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:states>
        <s:State name="normalMenu"/>
        <s:State name="hiddenMenu"/>
    </s:states>

    <s:transitions>
        <s:Transition id="myTransition1" fromState="*" toState="*" >
            <s:Sequence id="t1" targets="{[o0, o1]}">
                <s:Move duration="600"/>
            </s:Sequence >
        </s:Transition>
    </s:transitions>

    <s:HGroup x="0" y="33" id="visibleNav" width="100%" height="24" gap="0">
        <s:BorderContainer width="20%" height="100%" borderVisible="false" backgroundColor="#0000ff" >
            <s:Label text="HGroup Ipsum: " verticalCenter="0" left="10" color="#FFFFFF" fontSize="10"/>
        </s:BorderContainer>        
        <s:BorderContainer width="100%" height="24" borderVisible="false" backgroundColor="#005C3F" >
        </s:BorderContainer>
    </s:HGroup>

    <s:Group id="hiddenNav" alpha="0.9" x="0" y="0" width="100%" mouseOut="if(event.stageY>60)currentState='normalMenu'">
        <s:BorderContainer id="o0" width="100%" height="25" borderVisible="false" backgroundColor="#00110B" y="-20" x="0" y.hiddenMenu="33" y.normalMenu="-20">
            <s:Label text="hiddenNav Lorem Ipsum" x="0" y="0" color="0xFFFFFF"/>
        </s:BorderContainer>
        <s:BorderContainer id="o1" width="100%" height="25" borderVisible="false" backgroundColor="#ffff00" y="5" y.hiddenMenu="58" y.normalMenu="5">
        </s:BorderContainer>
    </s:Group>

    <s:BorderContainer x="0" y="0" width="100%" mouseOver="currentState='hiddenMenu'" height="32" borderVisible="false" backgroundColor="#848484" >
        <s:Label x="30" text="BorderContainer Lorem Ipsum" verticalCenter="0" color="#FFFFFF"/>
    </s:BorderContainer>
</s:Application>