Transition Class Reference

The Transition element defines animated transitions that occur on state changes. More...

Detailed Description

The Transition element defines animated transitions that occur on state changes.

Since

4.7

A Transition defines the animations to be applied when a State change occurs.

For example, the following Rectangle has two states: the default state, and an added "moved" state. In the "moved state, the rectangle's position changes to (50, 50). The added Transition specifies that when the rectangle changes between the default and the "moved" state, any changes to the x and y properties should be animated, using an Easing.InOutQuad.

import QtQuick 1.0

Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }

    states: State {
        name: "moved"; when: mouseArea.pressed
        PropertyChanges { target: rect; x: 50; y: 50 }
    }

    transitions: Transition { 
        NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad } 
    }
}

Notice the example does not require PropertyAnimation::to and PropertyAnimation::from values for the NumberAnimation. As a convenience, these properties are automatically set to the values of x and y before and after the state change; the from values are provided by the current values of x and y, and the to values are provided by the PropertyChanges object. If you wish, you can provide PropertyAnimation::to and PropertyAnimation::from values anyway to override the default values.

By default, a Transition's animations are applied for any state change in the parent item. The Transition Transition::from and Transition::to values can be set to restrict the animations to only be applied when changing from one particular state to another.

To define multiple transitions, specify Item::transitions as a list:

  transitions: [
    Transition {
        from: "stop"; to: "go"
        PropertyAnimation { target: stopLight
                            properties: "color"; duration: 1000 }
    },
    Transition {
        from: "go"; to: "stop"
        PropertyAnimation { target: goLight
                            properties: "color"; duration: 1000 }
    } ]

If multiple Transitions are specified, only a single (best-matching) Transition will be applied for any particular state change. In the example above, when changing to state1, the first transition will be used, rather than the more generic second transition.

If a state change has a Transition that matches the same property as a Behavior , the Transition animation overrides the Behavior for that state change.

See also

{QML Animation and Transitions}, {declarative/animation/states}{states example}, {qmlstates}{States}, {QtDeclarative}

---

The documentation for this class was generated from the following file:

• /src/declarative/util/qdeclarativetransition.cpp