Avoid contradiction in Animation and Transition documentation

Instead of sharing the animation, create an inline component for it and
instantiate it twice. Also, fix Behavior to actually apply to color.

Fixes: QTBUG-40851
Change-Id: I7dce5acb121ac6d699d782d24cc77ed9f0fa94e7
Reviewed-by: Shawn Rutledge <shawn.rutledge@qt.io>
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

1 files changed, 11 insertions, 10 deletions

diff --git a/src/quick/doc/snippets/qml/animation.qml b/src/quick/doc/snippets/qml/animation.qml
index 5b20f84629..4de88263b9 100644
--- a/src/quick/doc/snippets/qml/animation.qml
+++ b/src/quick/doc/snippets/qml/animation.qml
@@ -170,20 +170,21 @@ Rectangle {
     id: ball
     color: "salmon"
 
+    component BounceAnimation : NumberAnimation {
+       easing {
+          type: Easing.OutElastic
+          amplitude: 1.0
+          period: 0.5
+       }
+    }
+
     Behavior on x {
-        NumberAnimation {
-            id: bouncebehavior
-            easing {
-                type: Easing.OutElastic
-                amplitude: 1.0
-                period: 0.5
-            }
-        }
+        BounceAnimation {}
     }
     Behavior on y {
-        animation: bouncebehavior
+        BounceAnimation {}
     }
-    Behavior {
+    Behavior on color {
         ColorAnimation { target: ball; duration: 100 }
     }
 }