feat(Collapse): use transitions and states attributes

tests/ui/modules/Common/Collapse.qml

@@ -11,16 +11,18 @@ Item {
 
   signal collapsed (bool collapsed)
 
+  // -----------------------------------------------------------------
+
   function collapse () {
     _collapsed = !_collapsed
-    collapsed(_collapsed)
-    rotate.start()
   }
 
   function isCollapsed () {
     return _collapsed
   }
 
+  // -----------------------------------------------------------------
+
   ActionButton {
     id: button
 
@@ -32,14 +34,36 @@ Item {
     onClicked: collapse()
   }
 
-  RotationAnimation {
-    id: rotate
+  // -----------------------------------------------------------------
+
+  states: [
+    State {
+      name: 'Collapsed'
+      when: _collapsed
+
+      PropertyChanges {
+        target: button
+        rotation: 180
+      }
+    }
+  ]
+
+  transitions: Transition {
+    RotationAnimation {
+      direction: RotationAnimation.Clockwise
+      duration: CollapseStyle.animationDuration
+      property: 'rotation'
+      target: button
+    }
+
+    SequentialAnimation {
+      PauseAnimation {
+        duration: CollapseStyle.animationDuration
+      }
 
-    direction: RotationAnimation.Clockwise
-    duration: CollapseStyle.animationDuration
-    from: _collapsed ? 0 : 180
-    property: 'rotation'
-    target: button
-    to: _collapsed ? 180 : 0
+      ScriptAction {
+        script: collapsed(_collapsed)
+      }
+    }
   }
 }