Эффект перехода состояния Flex 4 в VGroup - PullRequest
Новая
       28

Эффект перехода состояния Flex 4 в VGroup

0 голосов
/ 11 мая 2011

Я пытаюсь создать красивый переход состояния, в котором у меня есть 2 контейнера (в приведенном ниже примере я использовал панели).

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

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

Также «обратного» перехода вообще не происходит.Я попытался установить для autoReverse значение true, и я также попытался создать противоположный переход, оба результата не было, перехода не было.

Когда я заменяю VGroup (в которой все это происходит) на VBox, я получаюнемного лучший результат, переход работает в одном направлении.Обратный переход по-прежнему не работает вообще. 

<?xml version="1.0" encoding="utf-8"?>


<fx:Script>
    <![CDATA[
        private function switchMode():void
        {
            if (currentState == "up")
                currentState = "down";
            else
                currentState = "up";
        }
    ]]>
</fx:Script>

<s:states>
    <s:State name="up" />
    <s:State name="down" />
</s:states>

<s:transitions>
    <s:Transition fromState="up" toState="down">
        <s:Sequence>
            <s:Fade target="{upperGrid}" />
            <s:RemoveAction target="{upperGrid}" />
            <s:Move target="{panel1}" />
            <s:AddAction target="{lowerGrid}" />
            <s:Fade target="{lowerGrid}" />
        </s:Sequence>
    </s:Transition>

    <s:Transition fromState="down" toState="up">
        <s:Sequence>
            <s:Fade target="{lowerGrid}" />
            <s:RemoveAction target="{lowerGrid}" />
            <s:Move target="{panel1}" />
            <s:AddAction target="{upperGrid}" />
            <s:Fade target="{upperGrid}" />
        </s:Sequence>
    </s:Transition>
</s:transitions>

<s:VGroup width="100%" height="100%" top="10" left="10" right="10" bottom="10">
    <s:Panel id="upperGrid" width="100%" height="100%" includeIn="up" title="upper panel" />
    <s:Panel id="panel1" width="100%" title="Panel">
        <s:Button label="Switch mode" click="switchMode()" />
    </s:Panel>
    <s:Panel id="lowerGrid" width="100%" height="100%" includeIn="down" title="lower panel" />
</s:VGroup>

Когда я избавляюсь от VGroup или VBox и использую абсолютные позиции,переходы работают нормально: 

<s:Panel id="upperGrid" left="10" right="10" top="10" bottom="{panel1.height + 20}" includeIn="up" title="upper panel" />
<s:Panel id="panel1" left="10" right="10" top.up="{upperGrid.height + 20}" top.down="10" title="Panel">
    <s:Button label="Switch mode" click="switchMode()" />
</s:Panel>
<s:Panel id="lowerGrid" left="10" right="10" top="{panel1.height + 20}" bottom="10" includeIn="down" title="lower panel" />

Следует ли вам всегда использовать абсолютное позиционирование, если вы хотите перемещать подобные переходы, или возможно использовать эти переходы в VGroup или VBox в сочетании со свойствами includeIn и excludeFrom?И если да, то как я могу исправить это в приведенном выше примере?

1 Ответ

0 голосов
/ 11 мая 2011

Проблема в том, что вы используете контейнер, предназначенный для «разметки» его дочерних элементов. Вы можете попытаться создать свой собственный макет, который мог бы знать, когда его дочерние элементы в данный момент находятся в эффекте, и не трогать их, пока они не закончили, или использовать вместо этого абсолютно позиционированный контейнер макета (например, Группу).

...