Flex transitions target all elements

1
votes

I want to fade all the elements of the next state when transitioning from any state. I tried different things but I can't get it to work. And I don't want to manually add transitions for every state.

Something like:

<s:Transition fromState="*" toState="*">
        <s:Fade target="*" duration="500" />
    </s:Transition>
2
apache-flex

2 Answers

1
votes

Hey, mihaimetal. I just found your post after struggling with this same thing myself. It turns out that the best way to do this is not to use the target property, but the targets one instead. This way, you can pass a whole Array of things that may be changed. I emphasize 'may', because only the items you give in the Array you pass to targets that are actually changed between states will will be affected.

You can change your sample code like so:

<s:Transition fromState="*" toState="*">
    <s:Fade targets="{[hboxID_1, hboxID_2, hboxID_3]}" duration="500" />
</s:Transition>

Hope this helps!

0
votes

Same question.

Bunch of screens attached to states, one screen at a time. Instead of abrupt switch on state change I want a simple fade.

Tried wildcard in target:

target="*"

in targets:

targets="{['*']}"

and tried removing targets/target

Nada

This works, but I don't want to id all states and track list of targets.

Here is a sample:

<s:states>
    <s:State name="default" stateGroups="sessionless"/>
    <s:State name="Welcome" stateGroups="session" />
    <s:State name="Settings" stateGroups="session" />
</s:states>
<s:Panel includeIn="sessionless">
    <comp:Login id="login" includeIn="Login" />
</s:Panel>
<s:Panel includeIn="session">
    <comp:Welcome id="welcome" includeIn="Welcome" />
    <comp:Settings id="settings" includeIn="Settings" />
</s:Panel>
<s:transitions><s:Transition id="fader" fromState="*" toState="*">
    <s:Fade duration="4000" targets="{[settings,login,welcome]}" />
</s:Transition></s:transitions>