Параллельный переход Fade State не воспроизводится

Question

Это старая проблема, но недавно она снова возникла; и на этот раз он отказывается работать сам. Проблема: Когда я нажимаю «Забыли пароль», программа мгновенно меняет состояния, не воспроизводя переход.

Код перехода:

<s:Transition toState="LoginForgotPassword" fromState="*" autoReverse="true">
    <s:Parallel targets="{[loginExisting, passwordGroup, loginNew, whyTextLink, loginForgot]}">
        <s:Fade duration="500" hideFocusRing="true"/>
    </s:Parallel>
</s:Transition>

Достигнутые цели:

<s:states>
    <s:State name="LoginMain"/>
    <s:State name="LoginForgotPassword"/>
    <s:State name="LoginRegister"/>
</s:states>
<s:Panel id="loginWizard" width="546" height="308" horizontalCenter="0" verticalCenter="0"
         title.LoginMain="Log-in or create account" title.LoginForgotPassword="Forgot Password"
         title.LoginRegister="New user registration">
    <s:VGroup width="100%" height="80%" horizontalAlign="center" verticalAlign="middle">
        <s:VGroup width="90%" height="85%">
            <s:RadioButton id="loginExisting"
                           label="I'm already a member and I want to login with my Tarrigato account."
                           groupName="loginMethod" alpha.LoginForgotPassword="0.0"
                           visible.LoginRegister="false"/>
            <s:HGroup width="100%" height="40" horizontalAlign="center">
                <s:HGroup width="80%" height="40">
                    <s:Label height="40" fontSize="15" width="100" text="Username: " verticalAlign="middle"/>
                    <s:TextInput id="loginUsername" width="300" height="40" focusIn="loginFocusInHandler(event)"/>
                </s:HGroup>
            </s:HGroup>
            <s:HGroup width="100%" height="40" horizontalAlign="center" id="passwordGroup" alpha.LoginForgotPassword="0.0">
                <s:HGroup width="80%" height="40">
                    <s:Label height="40" fontSize="15" width="100" text="Password:" verticalAlign="middle"/>
                    <s:TextInput id="loginPassword" displayAsPassword="true" width="300"
                                 focusIn="loginFocusInHandler(event)" height="40"/>
                </s:HGroup>
            </s:HGroup>
            <s:HGroup includeIn="LoginRegister" width="100%" height="40" horizontalAlign="center">
                <s:HGroup width="80%" height="40">
                    <s:Label height="40" fontSize="15" width="100" text="Email:" verticalAlign="middle"/>
                    <s:TextInput id="loginEmail" width="300" height="40"/>
                </s:HGroup>
            </s:HGroup>
            <s:HGroup includeIn="LoginRegister" width="100%" height="20" horizontalAlign="center">
                <s:HGroup width="80%" height="20">
                    <s:CheckBox id="acceptedRules" label="I accept the Tarrigato Rules &amp; Regulations"/>
                </s:HGroup>
            </s:HGroup>
            <s:Spacer height="15"/>
            <s:RadioButton id="loginNew"
                           label="I'm a new member and I want to create a new Tarrigato account now."
                           groupName="loginMethod" selected="true"  alpha.LoginForgotPassword="0.0"
                           visible.LoginRegister="false" includeInLayout.LoginRegister="false"/>
            <mx:LinkButton id="whyTextLink"
                           label="Want to know why you need a Kommunicate account?"
                           click="whyPanel.visible = true;" color="#B8B8B8"
                           textDecoration="underline"  alpha.LoginForgotPassword="0.0"
                           visible.LoginRegister="false" includeInLayout.LoginRegister="false"/>
        </s:VGroup>
    </s:VGroup>
    <mx:HRule y="218" width="100%"/>
    <s:Button id="loginForgot" left="7" bottom="7" label="Forgot Password?"
              click="currentState = &quot;LoginForgotPassword&quot;;"
              alpha.LoginForgotPassword="0.0"
              visible.LoginRegister="false"/>
    <s:Button id="loginCancel" right="126" bottom="7" label="Cancel"
              click="currentState = &quot;LoginMain&quot;;"
              enabled.LoginMain="false"/>
    <s:Button id="loginContinue" right="7" width="115" bottom="7" label="Continue"
              click="loginContinue_clickHandler(event)"/>
</s:Panel>

Answer 1

Вы поместили <s:transition> в <fx:Declarations> - оно должно быть в пределах <s:transitions>.

У вас есть:

<fx:Declarations>
    <s:Transition toState="LoginForgotPassword" fromState="*" autoReverse="true">
        <s:Parallel targets="{[loginExisting, passwordGroup, loginNew, whyTextLink, loginForgot]}">
            <s:Fade duration="500" hideFocusRing="true"/>
        </s:Parallel>
    </s:Transition>
</fx:Declarations>

Это должно быть реализовано как:

<s:transitions>
    <s:Transition toState="LoginForgotPassword" fromState="*" autoReverse="true">
        <s:Parallel targets="{[loginExisting, passwordGroup, loginNew, whyTextLink, loginForgot]}">
            <s:Fade duration="500" hideFocusRing="true"/>
        </s:Parallel>
    </s:Transition>
</s:transitions>

Использовать массив переходов вне объявлений.

Помимо этого, единственное изменение, которое я сделал, - это размещение идентификатора «passwordGroup» в HGroup, которая содержит метку пароля и TextInput. У вас был только пароль TextInput в целях перехода и вы не включили альфа-состояние для TextInput.

<?xml version="1.0" encoding="utf-8"?>
<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/mx"
               minWidth="955"
               minHeight="600"
               currentState="LoginMain">

    <s:states>
        <s:State name="LoginForgotPassword" />
        <s:State name="LoginMain" />
    </s:states>

    <s:transitions>
        <s:Transition toState="*"
                      fromState="*"
                      autoReverse="true">
            <s:Parallel targets="{[loginExisting, passwordGroup, loginNew, whyTextLink, loginForgot]}">
                <s:Fade duration="500" />
            </s:Parallel>
        </s:Transition>
    </s:transitions>

    <s:Panel id="loginWizard"
             width="546"
             height="308"
             horizontalCenter="0"
             title="Log-in or create account"
             title.LoginForgotPassword="Forgot Password"
             verticalCenter="-0">
        <s:VGroup width="100%"
                  height="80%"
                  horizontalAlign="center"
                  verticalAlign="middle">
            <s:VGroup width="90%"
                      height="75%">
                <s:RadioButton id="loginExisting"
                               label="I'm already a member and I want to login with my Tarrigato account."
                               groupName="loginMethod"
                               alpha.LoginForgotPassword="0.0" />
                <s:HGroup width="100%"
                          height="40"
                          horizontalAlign="center">
                    <s:HGroup width="80%"
                              height="40">
                        <s:Label height="40"
                                 fontSize="15"
                                 width="100"
                                 text="Username: "
                                 verticalAlign="middle" />
                        <!-- unknown reference: focusIn="loginFocusInHandler(event)" -->
                        <s:TextInput id="loginUsername"
                                     width="300"
                                     height="40" />
                    </s:HGroup>
                </s:HGroup>
                <s:HGroup id="passwordGroup"
                          alpha.LoginForgotPassword="0.0"
                          width="100%"
                          height="40"
                          horizontalAlign="center">
                    <s:HGroup width="80%"
                              height="40">
                        <s:Label height="40"
                                 fontSize="15"
                                 width="100"
                                 text="Password:"
                                 verticalAlign="middle" />
                        <!-- unknown reference: focusIn="loginFocusInHandler(event)" -->
                        <s:TextInput id="loginPassword"
                                     displayAsPassword="true"
                                     width="300"
                                     height="40"
                                     left="4" />
                    </s:HGroup>
                </s:HGroup>
                <s:Spacer height="15" />
                <s:RadioButton id="loginNew"
                               label="I'm a new member and I want to create a new Tarrigato account now."
                               groupName="loginMethod"
                               selected="true"
                               alpha.LoginForgotPassword="0.0" />
                <!-- unknown reference: click="whyPanel.visible = true;" -->
                <mx:LinkButton id="whyTextLink"
                               label="Want to know why you need a Kommunicate account?"
                               color="#B8B8B8"
                               textDecoration="underline"
                               alpha.LoginForgotPassword="0.0" />
            </s:VGroup>
        </s:VGroup>
        <mx:HRule y="218"
                  width="100%" />
        <s:Button id="loginForgot"
                  left="7"
                  bottom="7"
                  label="Forgot Password?"
                  alpha.LoginForgotPassword="0.0"
                  click="currentState = 'LoginForgotPassword';" />
        <s:Button id="loginCancel"
                  right="127"
                  bottom="7"
                  label="Cancel"
                  click="currentState = 'LoginMain';"
                  enabled.LoginMain="false" />
        <s:Button id="loginContinue"
                  right="7"
                  bottom="7"
                  label="Continue" />
    </s:Panel>
</s:Application>