1 files changed, 94 insertions, 41 deletions
diff --git a/src/quick/doc/snippets/qml/transitions-list.qml b/src/quick/doc/snippets/qml/transitions-list.qml
index 06b9e39cc8..972d3ee14e 100644
--- a/src/quick/doc/snippets/qml/transitions-list.qml
+++ b/src/quick/doc/snippets/qml/transitions-list.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2017 The Qt Company Ltd.
+** Copyright (C) 2019 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the documentation of the Qt Toolkit.
@@ -48,52 +48,105 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.13
 
 Rectangle {
-  width: 150; height: 250
+    id: page
+    width: 640
+    height: 500
 
-  Rectangle {
-      id: stopLight
-      x: 25; y: 15; width: 100; height: 100
-  }
-  Rectangle {
-      id: goLight
-      x: 25; y: 135; width: 100; height: 100
-  }
+    Image {
+        id: userIcon
+        x: topLeftRect.x
+        y: topLeftRect.y
 
-  states: [
-    State {
-      name: "stop"
-      PropertyChanges { target: stopLight; color: "red" }
-      PropertyChanges { target: goLight; color: "black" }
-    },
-    State {
-      name: "go"
-      PropertyChanges { target: stopLight; color: "black" }
-      PropertyChanges { target: goLight; color: "green" }
+        source: "../../images/declarative-qtlogo.png"
     }
-  ]
 
-  state: "stop"
+    Rectangle {
+        id: topLeftRect
+        anchors { left: parent.left; top: parent.top; leftMargin: 10; topMargin: 20 }
+        width: 46; height: 54
+        color: "Transparent"; border.color: "Gray"; radius: 6
+        // Clicking here sets state to default state, returning image to initial position
+        TapHandler { onTapped: page.state = 'start' }
+    }
+
+    Rectangle {
+        id: middleRightRect
+        anchors { right: parent.right; verticalCenter: parent.verticalCenter; rightMargin: 20 }
+        width: 46; height: 54
+        color: "Transparent"; border.color: "Gray"; radius: 6
+        // Clicking in here sets the state to 'middleRight'
+        TapHandler { onTapped: page.state = 'middleRight' }
+    }
 
-  MouseArea {
-      anchors.fill: parent
-      onClicked: parent.state == "stop" ?
-                 parent.state = "go" : parent.state = "stop"
-  }
+    Rectangle {
+        id: bottomLeftRect
+        anchors { left: parent.left; bottom: parent.bottom; leftMargin: 10; bottomMargin: 20 }
+        width: 46; height: 54
+        color: "Transparent"; border.color: "Gray"; radius: 6
+        // Clicking in here sets the state to 'bottomLeft'
+        TapHandler { onTapped: page.state = 'bottomLeft' }
+    }
 
-  //! [list of transitions]
-  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 }
-    } ]
-  //! [list of transitions]
+    states: [
+        State {
+            name: "start"
+            PropertyChanges {
+                target: userIcon
+                explicit: true
+                x: topLeftRect.x
+                y: topLeftRect.y
+            }
+        },
+        State {
+            name: "middleRight"
+            PropertyChanges {
+                target: userIcon
+                explicit: true
+                x: middleRightRect.x
+                y: middleRightRect.y
+            }
+        },
+        State {
+            name: "bottomLeft"
+            PropertyChanges {
+                target: userIcon
+                explicit: true
+                x: bottomLeftRect.x
+                y: bottomLeftRect.y
+            }
+        }
+    ]
+//! [list of transitions]
+    transitions: [
+        Transition {
+            from: "*"; to: "middleRight"
+            NumberAnimation {
+                properties: "x,y";
+                easing.type: Easing.InOutQuad;
+                duration: 2000;
+            }
+        },
+        Transition {
+            from: "*"; to: "bottomLeft";
+            NumberAnimation {
+                properties: "x,y";
+                easing.type: Easing.InOutQuad;
+                duration: 200;
+            }
+        },
+        //If any other rectangle is clicked, the icon will return
+        //to the start position at a slow speed and bounce.
+        Transition {
+            from: "*"; to: "*";
+            NumberAnimation {
+                easing.type: Easing.OutBounce;
+                properties: "x,y";
+                duration: 4000;
+            }
+        }
+    ]
+//! [list of transitions]
 }