Flex 4 slideDown Effet

Question

Je cherche à recréer un effet que j'ai trouvé sur (another site. Lorsque vous passez la souris sur la zone d'en-tête gris une diapositive menu déroulant apparaît.

La question que j'ai est que lorsque je . souris sur la zone, le conteneur de hiddenNav apparaît et ne pas instantanément le bel effet de déplacement

Voici mon code actuel

<?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 
     { 
      currentState=(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> 

Answer 1

problème

était targets attribut - il est inutile de mentionner Group la re, voici votre code corrigé:

<?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>