Почему этот Flex 4 Transition не работает? - PullRequest
Новая
       33

Почему этот Flex 4 Transition не работает?

1 голос
/ 17 мая 2011

У меня есть тестовое приложение здесь , которое было сделано с использованием следующего кода: 

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

Вы можете проверить, нажав на ссылку Я дал, что это приложение выполняет некоторый базовый эффект перехода , когда вы выбираете различные параметры из DropDownBox .

Первый (показ) переход не работает так хорошо, но второй (скрытие) переход делает.

Кто-нибудь знает, как это исправить? При первом переходе я бы хотел, чтобы кнопка скользила вниз сначала , только после этого должен исчезнуть ввод текста. Почему это не работает?

Заранее спасибо.

Ответы [ 2 ]

2 голосов
/ 17 мая 2011

Лучше указывать конкретную цель эффекта, чем указывать все цели в <s:Sequence />.Так что ставьте цели на <s:Move /> и <s:Fade />.Также вы можете выполнить дополнительную настройку переходов, поместив <s:AddAction /> и <s:RemoveAction /> с соответствующими целями, чтобы указать место в последовательности, где переход должен вызывать объявления состояний includeIn и excludeFrom.

Так что эти переходы работают нормальнос вашим кодом: 

<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>
1 голос
/ 17 мая 2011

Я полагаю, это потому, что ваш ввод тега включается только в состояние tagInput, но альфа составляет 100%, и между состояниями нет перехода. Попробуйте это: 

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

Возможно, вы также захотите установить значение false для параметра visible в состоянии «по умолчанию». Кроме того, то, что сказал Константинер, верно.

...