1 files changed, 27 insertions, 78 deletions
diff --git a/examples/declarative/states/transitions.qml b/examples/declarative/states/transitions.qml
index c7fc656..4c1dceb 100644
--- a/examples/declarative/states/transitions.qml
+++ b/examples/declarative/states/transitions.qml
@@ -1,111 +1,60 @@
 Rect {
     id: Page
-    width: 300
-    height: 300
-    color: "white"
+    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='' }
-        }
+        x: 0; y: 0; width: 50; height: 50
+        color: "transparent"; pen.color: "black"
+        MouseRegion { anchors.fill: parent; onClicked: { Page.state='' } }
     }
     // 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' }
-        }
+        x: 150; y: 50; width: 50; height: 50
+        color: "transparent"; pen.color: "black"
+        MouseRegion { anchors.fill: parent; onClicked: { Page.state='Position1' } }
     }
     // 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' }
-        }
+        x: 0; y: 200; width: 50; height: 50
+        color: "transparent"; pen.color: "black"
+        MouseRegion { anchors.fill: parent; onClicked: { Page.state='Position2' } }
     }
     // Rect which will be moved when my state changes
-    Rect {
-        id: myrect
-        width: 50
-        height: 50
-        color: "red"
-    }
+    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
-            }
-        }        // In state 'Position2', change y to 100.  We do not specify 'x' here - 
+            SetProperty { target: myrect; property: "x"; value: 150 }
+            SetProperty { target: myrect; property: "y"; value: 50 }
+        },
+        // 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
-            }
+            SetProperty { target: myrect; property: "y"; value: 200 }
         }
     ]
+
     // 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
-            }
-        }        // When transitioning to 'Position2' move x,y over a duration of 2 seconds,
+            fromState: "*"; toState: "Position1"
+            NumericAnimation { properties: "x,y"; easing: "easeOutBounce"; duration: 1000 }
+        },
+        // 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
-            }
-        }        // For any other state changes move x,y linearly over duration of 200ms.
-,
+            fromState: "*"; toState: "Position2"
+            NumericAnimation { properties: "x,y"; easing: "easeInOutQuad"; duration: 2000 }
+        },
+        // For any other state changes move x,y linearly over duration of 200ms.
         Transition {
-            NumericAnimation {
-                properties: "x,y"
-                duration: 200
-            }
+            NumericAnimation { properties: "x,y"; duration: 200 }
         }
     ]
 }