Apache Flex 4.16.1 API Reference | All Packages | All Classes | Index | Frames No Frames |
Transition

Package | mx.states
Class | public class Transition
Inheritance | Transition Object

Language Version : | ActionScript 3.0

Product Version : | Flex 3

Runtime Versions : | Flash Player 9, AIR 1.1

The Transition class defines a set of effects that play in response to a change of view state. While a view state definition defines how to change states, a transition defines the order in which visual changes occur during the state change.

To define a transition, you set the `transitions` property of an Application to an Array of Transition objects.

You use the `toState` and `fromState` properties of the Transition class to specify the state changes that trigger the transition. By default, both the `fromState` and `toState` properties are set to "*", meaning apply the transition to any changes to the view state.

You can use the `fromState` property to explicitly specify a view state that your are changing from, and the `toState` property to explicitly specify a view state that you are changing to. If a state change matches two transitions, the `toState` property takes precedence over the `fromState` property. If more than one transition match, Flex uses the first definition in the transition array.

You use the `effect` property to specify the Effect object to play when you apply the transition. Typically, this is a composite effect object, such as the Parallel or Sequence effect, that contains multiple effects, as the following example shows:

       <mx:Transition id="myTransition" fromState="*" toState="*">
        <mx:Parallel>
            ...
        </mx:Parallel>
      </mx:Transition>

MXML Syntax Show MXML Syntax
Hide MXML Syntax

The `<mx:Transition>` tag defines the following attributes:

      <mx:Transition
        Properties
        id="ID"
        effect=""
        fromState="*"
        toState="*"
        autoReverse="false"
      />

Default MXML Property `effect`

View the examples

See also

mx.effects.AddChildAction
mx.effects.RemoveChildAction
mx.effects.SetPropertyAction
mx.effects.SetStyleAction

Public Properties

| Property | Defined By
--- | --- | ---
|  | autoReverse : Boolean = false Set to true to specify that this transition applies to both the forward and reverse view state changes. | Transition
|  | effect : IEffect The IEffect object to play when you apply the transition. | Transition
|  | fromState : String = * A String specifying the view state that your are changing from when you apply the transition. | Transition
|  | interruptionBehavior : String = end Flex does not support the playing of multiple transitions simultaneously. | Transition
|  | toState : String = * A String specifying the view state that you are changing to when you apply the transition. | Transition

Public Methods

| Method | Defined By
--- | --- | ---
|  | Transition() Constructor. | Transition

Property Detail

autoReverse | property

`public var autoReverse:Boolean = false`

Language Version : | ActionScript 3.0

Product Version : | Flex 3

Runtime Versions : | Flash Player 9, AIR 1.1

Set to `true` to specify that this transition applies to both the forward and reverse view state changes. Therefore, use this transition on a change from view state A to view state B, and on the change from B to A.

While the transition from view state A to view state B is playing, the reverse transition can occur to interrupt the current transition. The reverse transition always halts the current transition at its current location. That is, the reverse transition always plays as if the `interruptionBehavior` property was set to `stop`, regardless of the real value of `interruptionBehavior`.

This property is only checked when the new transition is going in the exact opposite direction of the currently playing one. That is, if a transition is playing between states A and B and then a transition to return to A is started.

If a transition uses the `toState` and `fromState` properties to explicitly handle the transition from view state B to A, then Flex ignores the `autoReverse` property.

The default value is `false`.

See also

Transition.interruptionBehavior

effect | property |

`public var effect:IEffect`

Language Version : | ActionScript 3.0

Product Version : | Flex 3

Runtime Versions : | Flash Player 9, AIR 1.1

The IEffect object to play when you apply the transition. Typically, this is a composite effect object, such as the Parallel or Sequence effect, that contains multiple effects.

The `effect` property is the default property of the Transition class. You can omit the `<mx:effect>` tag if you use MXML tag syntax.

fromState | property |

`public var fromState:String = *`

Language Version : | ActionScript 3.0

Product Version : | Flex 3

Runtime Versions : | Flash Player 9, AIR 1.1

A String specifying the view state that your are changing from when you apply the transition. The default value is "*", meaning any view state.

You can set this property to an empty string, "", which corresponds to the base view state.

The default value is `"*"`.

interruptionBehavior | property |

`public var interruptionBehavior:String = end`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10.2, AIR 2.5

Flex does not support the playing of multiple transitions simultaneously. If a transition is currently playing when a new transition occurs, the current transition is interrupted. This property controls how the current transition behaves when interrupted.

By default, the current transition ends, which snaps all effects in the transition to their end values. This corresponds to a property value of `end`. If the value of this property is `stop`, the current transition halts at its current location. The new transition start playing from the halt location of the previous transition.

The value of `stop` can smooth out the appearance of an interrupted transition. That is because the user does not see the current transition snap to its end state before the new transition begins.

In some cases, the interrupting transition can be the reverse of the current transition. For example, while the transition from view state A to view state B is playing, the reverse transition occurs to interrupt the current transition. If you set the `autoReverse` property of a transition instance to `true`, you can use the same transition to handle both the forward and reverse transitions. When the interrupting transition is the reverse transition of the current transition and has `autoReverse` set to `true`, the interrupting transition runs as if the `interruptionBehavior` property was set to `stop`, regardless of the real value of `interruptionBehavior`.

The mx.states.InterruptionBehavior class defines the possible values for this property.

The default value is `end`.

See also

Transition.autoReverse
mx.states.InterruptionBehavior

toState | property |

`public var toState:String = *`

Language Version : | ActionScript 3.0

Product Version : | Flex 3

Runtime Versions : | Flash Player 9, AIR 1.1

A String specifying the view state that you are changing to when you apply the transition. The default value is "*", meaning any view state.

You can set this property to an empty string, "", which corresponds to the base view state.

The default value is `"*"`.

Constructor Detail

Transition | () | Constructor

`public function Transition()`

Language Version : | ActionScript 3.0

Product Version : | Flex 3

Runtime Versions : | Flash Player 9, AIR 1.1

Constructor.

Examples
TransitionExample.mxml

    <?xml version="1.0" ?>
    <!--

      Licensed to the Apache Software Foundation (ASF) under one or more
      contributor license agreements.  See the NOTICE file distributed with
      this work for additional information regarding copyright ownership.
      The ASF licenses this file to You under the Apache License, Version 2.0
      (the "License"); you may not use this file except in compliance with
      the License.  You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

      Unless required by applicable law or agreed to in writing, software
      distributed under the License is distributed on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
      See the License for the specific language governing permissions and
      limitations under the License.

    -->
    <!-- Simple example to demonstrate the Transition class. -->
    <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" currentState="Login">

        <!-- Define the view states -->
        <s:states>
            <s:State name="Login" />
            <s:State name="Register" />
        </s:states>

        <s:transitions>
            <!-- Define the transition from the base state to the Register state.-->
            <s:Transition id="toRegister" fromState="*" toState="Register">
                <s:Sequence targets="{[loginPanel, registerLink, confirm, loginLink]}">
                    <s:RemoveAction />
                    <s:Fade />
                    <s:SetAction target="{loginPanel}" property="title" />
                    <s:SetAction target="{loginButton}" property="label" />
                    <s:SetAction target="{loginButton}" property="color" />
                    <s:Resize target="{loginPanel}"/>
                    <s:AddAction />
                    <s:Fade />
                </s:Sequence>
            </s:Transition>

            <!-- Define the transition from the Register state to the base state.-->
            <s:Transition id="toDefault" fromState="Register" toState="*">
                <s:Sequence targets="{[loginPanel, registerLink,
                        confirm, loginLink]}">
                    <s:RemoveAction/>
                    <s:SetAction target="{loginPanel}" property="title"/>
                    <s:SetAction  target="{loginButton}" property="label"/>
                    <s:SetAction target="{loginButton}" property="color"/>
                    <s:Resize target="{loginPanel}"/>
                    <s:AddAction/>
                </s:Sequence>
            </s:Transition>
        </s:transitions>

        <!-- Define a Panel container that defines the login form. The title of the Panel
             changes depending on the state. -->
        <s:Panel title="Login" title.Register="Register" id="loginPanel"
                width="75%" horizontalCenter="0" verticalCenter="0">
        <s:controlBarLayout >
            <s:BasicLayout />
        </s:controlBarLayout>
        <s:layout>
            <s:VerticalLayout paddingTop="10" paddingBottom="10" paddingRight="10" paddingLeft="10" />
        </s:layout>
            <s:Label color="blue" width="100%"
                text="Click the 'Need to Register?' link to change state. Click the 'Return to Login' link to return to the base state."/>

            <!-- The following form has  two TextInputs in the Login state and three TextInputs
                 in the Register state. -->
            <s:Form id="loginForm" >
                <s:FormItem label="Username:">
                    <s:TextInput/>
                </s:FormItem>
                <s:FormItem label="Password:">
                    <s:TextInput/>
                </s:FormItem>
                <s:FormItem id="confirm" label="Confirm:" includeIn="Register" includeInLayout="false" includeInLayout.Register="true">
                    <s:TextInput/>
                </s:FormItem>
            </s:Form>

            <!-- The controlBar includes two visible items in each state. Which LinkButton is visible is determined
                 by the state -->
            <s:controlBarContent>
                <mx:LinkButton id="registerLink"  label="Need to Register?" top="10" bottom="10"
                    click="currentState='Register'" left="10" includeIn="Login" />
                <mx:LinkButton id="loginLink" label="Return to Login" click="currentState=''" includeIn="Register" left="10"  top="10" bottom="10"/>
                <s:Button label="Login" label.Register="Register" id="loginButton" right="10" color.Register="0x0000FF"  top="10" bottom="10"/>
            </s:controlBarContent>
        </s:Panel>
    </s:Application>

Wed Nov 15 2017, 09:50 AM +01:00