1. Overview of data members

animations : list<Animation>
enabled : bool
from : string
reversible : bool
running : bool
to : string 

2. Detailed description

Transition defines the animation applied when the state changes.
For example, the following rectangle has two states: the default state and the added move state. In the "move" state, the position of the rectangle changes to (50,50). The added transition specifies that any changes to the x and y attributes should be animated when the rectangle changes between the default and move States, using easinginoutquad.

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

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

}

Note that this example does not require the to and from values of NumberAnimation. For convenience, these attributes are automatically set to the x and Y values before and after the state change; The from value is provided by the current values of x and y, and the to value is provided by the PropertyChanges object. If you like, you can override the default values by providing to and from values in any way.
By default, the Transition animation is applied to any state change in the parent project. You can set the Transition from to values to limit animation to changes from one particular state to another.
To define multiple transformations, specify Item::transitions to convert to 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 one (best match) Transition is applied for any particular state change. In the above example, when changing to state1, the first transformation is used instead of the more general second transformation.
If a state change has a Transition that matches the same properties as the Behavior, the Transition animation overrides the Behavior of the state change.
See animation and transitions in Qt Quick, state examples, Qt Quick States and Qt QML.

3. Detailed introduction of data members

3.1 [default] animations : list<Animation>

This property holds a list of animations to run for this transformation.

  transitions: Transition {
      PropertyAnimation { duration: 3000 }
      ColorAnimation { duration: 3000 }
  }

Note: PropertyAnimation and ColorAnimation inherit from Animation

 

Top level animation runs in parallel. To run them sequentially, define them in SequentialAnimation:

  transitions: Transition {
      SequentialAnimation {
          PropertyAnimation { property: "x"; duration: 1000 }
          ColorAnimation { duration: 1000 }
      }
  }

3.2 enabled : bool

This property is used to save whether Transition is run when moving from one state to another.  

By default, Transition is enabled.  

Note that in some cases, disabling one Transition may cause another Transition to be used in its location.   In the following example, although the first Transition is set to animate changes from "state1" to "state2", this Transition has been disabled by setting enabled to false, so any such state changes will actually be animated by the second Transition.  

  Item {
      states: [
          State { name: "state1" },
          State { name: "state2" }
      ]
      transitions: [
          Transition { from: "state1"; to: "state2"; enabled: false },
          Transition {
              // ...
          }
      ]
  }

3.3 from : string

These properties indicate the state change that triggered the transition.
The default value for these properties is "*" (that is, any state).
For example, the following transition does not set the to and from attributes, so when changing between two states (i.e. when the mouse is pressed and released), the animation is always applied.

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

      MouseArea { id: mouseArea; anchors.fill: parent }

      states: State {
          name: "brighter"; when: mouseArea.pressed
          PropertyChanges { target: rect; color: "yellow" }
      }

      transitions: Transition {
          ColorAnimation { duration: 1000 }
      }
  }

If the conversion is changed to this:

  transitions: Transition {
      to: "brighter"
      ColorAnimation { duration: 1000 }
  }

Animation is applied only when you switch from the default state to the "lighter" state (that is, when the mouse is pressed rather than released).
You can set multiple round-trip values using comma separated strings.
See reversible.

3.4 reversible : bool

This property holds whether the transition should be reversed automatically when the condition that triggered it is reversed.
The default value is false.
By default, transitions run in parallel, and if the from and to states are not set, the transitions are applied to all state changes. In this case, when the state change is reversed, the transition is automatically applied, and there is no need to set this property to reverse the transition.
However, if SequentialAnimation is used, or the from or to property is set, this property needs to be set to reverse the transition when the state change is restored. For example, when the mouse is pressed, the following transition applies a sequential animation, and when the mouse is released, the animation order is reversed:

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

      MouseArea { id: mouseArea; anchors.fill: parent }

      states: State {
          name: "brighter"
          when: mouseArea.pressed
          PropertyChanges { target: rect; color: "yellow"; x: 50 }
      }

      transitions: Transition {
          SequentialAnimation {
              PropertyAnimation { property: "x"; duration: 1000 }
              ColorAnimation { duration: 1000 }
          }
      }
  }

If the conversion does not set the values of to and reversible, when the mouse is released, the conversion will execute PropertyAnimation before ColorAnimation instead of reversing the sequence.

3.5 running : bool

This property determines whether the transformation is currently running.
This property is read-only.

3.6 to : string

These properties indicate the state change that triggered the transition.
The default value for these properties is "*" (that is, any state).
For example, the following transition does not set the to and from attributes, so when changing between two states (i.e. when the mouse is pressed and released), the animation is always applied.

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

      MouseArea { id: mouseArea; anchors.fill: parent }

      states: State {
          name: "brighter"; when: mouseArea.pressed
          PropertyChanges { target: rect; color: "yellow" }
      }

      transitions: Transition {
          ColorAnimation { duration: 1000 }
      }
  }

If the conversion is changed to this:

  transitions: Transition {
      to: "brighter"
      ColorAnimation { duration: 1000 }
  }

Animation is applied only when you switch from the default state to the "on" state (that is, when the mouse is pressed rather than released).
You can set multiple round-trip values using comma separated strings.
See reversible.