Doc: Update the 'reversible' Transition code snippet

- Use 'better' colors
- Replace MouseArea with a TapHandler
- Update QtQuick import statement

Change-Id: I32c2ca87855ba1708ddc33329a05035a55bab82b
Reviewed-by: Shawn Rutledge <[email protected]>

1 files changed, 5 insertions, 5 deletions

diff --git a/src/quick/doc/snippets/qml/transition-reversible.qml b/src/quick/doc/snippets/qml/transition-reversible.qml
index 3ddbd0fa3d..f74b6bffb3 100644
--- a/src/quick/doc/snippets/qml/transition-reversible.qml
+++ b/src/quick/doc/snippets/qml/transition-reversible.qml
@@ -47,20 +47,20 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
-import QtQuick 2.0
+import QtQuick 2.12
 
 //![0]
 Rectangle {
     id: rect
     width: 100; height: 100
-    color: "red"
+    color: "steelblue"
 
-    MouseArea { id: mouseArea; anchors.fill: parent }
+    TapHandler { id: tapHandler }
 
     states: State {
         name: "brighter"
-        when: mouseArea.pressed
-        PropertyChanges { target: rect; color: "yellow"; x: 50 }
+        when: tapHandler.pressed
+        PropertyChanges { target: rect; color: "lightsteelblue"; x: 50 }
     }
 
     //! [sequential animations]