Pourquoi cette transition Flex 4 ne fonctionne-t-elle pas?

Question

J'ai une application de test here qui a été faite en utilisant le code suivant:

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

Vous pouvez vérifier, par cliquant sur le lien j'ai donné, que cette application effectue un effet de transition de base lorsque vous sélectionnez différentes options à partir du DropDownBox.

La première transition (show) ne fonctionne pas très bien, mais la seconde transition (hide) le fait.

Est-ce que quelqu'un sait comment résoudre ce problème? Dans la première transition, je voudrais que le bouton glisse vers le bas d'abord, seulement après cela devrait le fondu d'entrée de texte. Pourquoi cela ne fonctionne-t-il pas?

Merci d'avance.

Answer 1

Il est préférable de pointer une cible d'effet particulière plutôt que de pointer toutes les cibles dans <s:Sequence />. Placez donc les cibles à <s:Move /> et <s:Fade />. Vous pouvez également effectuer d'autres réglages de transition en plaçant <s:AddAction /> et <s:RemoveAction /> avec des cibles correspondantes pour pointer un emplacement dans la séquence où la transition doit appeler les déclarations d'états includeIn et excludeFrom.

Ainsi, ces transitions fonctionne très bien avec votre 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> 

Answer 2

J'imagine que c'est parce que l'entrée de votre balise est uniquement inclus dans l'état tagInput, mais l'alpha est 100% et il n'y a pas de transition entre les états . Essayez ceci:

<s:Label id="tagsLabel" alpha.default="0" alpha.tagInput="100" x="104" y="146" width="61" height="20" text="Tags" textAlign="center" verticalAlign="middle"/> 
<s:TextInput id="tagsTextInput" alpha.default="0" alpha.tagInput="100" x="173" y="146" width="123"/> 

Vous pouvez également activer la valeur false à l'état 'default'. Aussi, ce que Constantin a dit est vrai.