1 files changed, 68 insertions, 0 deletions
diff --git a/examples/declarative/states/transitions.qml b/examples/declarative/states/transitions.qml
new file mode 100644
index 0000000..c3f3515
--- /dev/null
+++ b/examples/declarative/states/transitions.qml
@@ -0,0 +1,68 @@
+<Rect id="Page" width="300" height="300" color="white">
+
+    <!-- A target region.  Clicking in here sets the state to '' - the default state -->
+    <Rect width="50" height="50" x="0" y="0" color="transparent" pen.color="black">
+        <MouseRegion anchors.fill="{parent}" onClicked="Page.state=''"/>
+    </Rect>
+
+    <!-- Another target region.  Clicking in here sets the state to 'Position1' -->
+    <Rect width="50" height="50" x="150" y="50" color="transparent" pen.color="black">
+        <MouseRegion anchors.fill="{parent}" onClicked="Page.state='Position1'"/>
+    </Rect>
+
+    <!-- Another target region.  Clicking in here sets the state to 'Position2' -->
+    <Rect width="50" height="50" x="0" y="200" color="transparent" pen.color="black">
+        <MouseRegion anchors.fill="{parent}" onClicked="Page.state='Position2'"/>
+    </Rect>
+
+    <!-- Rect which will be moved when my state changes -->
+    <Rect id="myrect" width="50" height="50" color="red"/>
+
+    <states>
+
+        <!-- In state 'Position1', change the 'myrect' item x, y to 150, 50. -->
+        <State name="Position1">
+            <SetProperty target="{myrect}" property="x" value="150"/>
+            <SetProperty target="{myrect}" property="y" value="50"/>
+        </State>
+
+        <!--
+        In state 'Position2', change y to 100.  We do not specify 'x' here - 
+        it will therefore be restored to its default value of 0, if it
+        had been changed.
+        -->
+        <State name="Position2">
+            <SetProperty target="{myrect}" property="y" value="200"/>
+        </State>
+
+    </states>
+
+    <!-- transitions define how the properties change. -->
+    <transitions>
+
+        <!--
+        When transitioning to 'Position1' move x,y over a duration of 1 second,
+        with easeOutBounce easing function.
+        -->
+        <Transition fromState="*" toState="Position1">
+            <NumericAnimation properties="x,y" easing="easeOutBounce" duration="1000" />
+        </Transition>
+
+        <!--
+        When transitioning to 'Position2' move x,y over a duration of 2 seconds,
+        with easeInOutQuad easing function.
+        -->
+        <Transition fromState="*" toState="Position2">
+            <NumericAnimation properties="x,y" easing="easeInOutQuad" duration="2000" />
+        </Transition>
+
+        <!--
+        For any other state changes move x,y linearly over duration of 200ms.
+        -->
+        <Transition>
+            <NumericAnimation properties="x,y" duration="200" />
+        </Transition>
+
+    </transitions>
+
+</Rect>