Rename and updating FlowView

Change-Id: I316f5f5efb4236a9a9ac191e92d54413d01c4adb
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

79 files changed, 570 insertions, 156 deletions

diff --git a/examples/TransitionItem/Screen01.ui.qml b/examples/TransitionItem/Screen01.ui.qml
index 8bc134c..db83f8a 100644
--- a/examples/TransitionItem/Screen01.ui.qml
+++ b/examples/TransitionItem/Screen01.ui.qml
@@ -1,3 +1,5 @@
+
+
 /****************************************************************************
 **
 ** Copyright (C) 2018 The Qt Company Ltd.
@@ -26,12 +28,11 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
-
 import QtQuick 2.10
 import TransitionItem 1.0
 import QtQuick.Controls 2.3
 import QtQuick.Timeline 1.0
-import TransitionView 1.0
+import FlowView 1.0
 
 Rectangle {
     id: rectangle
@@ -40,7 +41,7 @@ Rectangle {
 
     color: Constants.backgroundColor
 
-    TransitionView {
+    FlowView {
         id: view
         x: 3
         y: -4
@@ -82,98 +83,92 @@ Rectangle {
             }
         }
 
-        defaultTransition: PageTransition {
-        }
+        defaultTransition: FlowTransition {}
 
-        transitions: [
-            PageTransition {
+        flowTransitions: [
+            FlowTransition {
                 from: page01
                 to: page02
 
-                effect: PageSlideRightEffect {
-                }
+                effect: FlowSlideRightEffect {}
             },
 
-            PageTransition {
+            FlowTransition {
                 from: page02
                 to: page03
 
-                effect: PageSlideRightEffect {
+                effect: FlowSlideRightEffect {
                     duration: 500
                 }
             },
-            PageTransition {
+            FlowTransition {
                 from: page03
                 to: page04
 
-                effect: PagePushRightEffect {
-                }
+                effect: FlowPushRightEffect {}
             },
-            PageTransition {
+            FlowTransition {
                 from: page04
                 to: page05
 
-                effect: PagePushRightEffect {
+                effect: FlowPushRightEffect {
                     duration: 500
                 }
             },
 
-            PageTransition {
+            FlowTransition {
                 from: page05
                 to: page06
 
-                effect: PageSlideUpEffect {
+                effect: FlowSlideUpEffect {
                     easing.bezierCurve: [0.236, 0.75, 0.592, 0.862, 0.768, 0.982, 0.861, 0.936, 0.812, 0.929, 0.886, 0.96, 0.93, 0.984, 0.957, 0.986, 1, 1]
                 }
             },
 
-            PageTransition {
+            FlowTransition {
                 from: page06
                 to: page05
 
-                effect: PageSlideDownEffect {
+                effect: FlowSlideDownEffect {
                     easing.bezierCurve: [0.236, 0.75, 0.592, 0.862, 0.768, 0.982, 0.861, 0.936, 0.812, 0.929, 0.886, 0.96, 0.93, 0.984, 0.957, 0.986, 1, 1]
                 }
             },
-            PageTransition {
+            FlowTransition {
                 from: page04
                 to: page03
 
-                effect: PagePushLeftEffect {
-                }
+                effect: FlowPushLeftEffect {}
             },
-            PageTransition {
+            FlowTransition {
                 from: page05
                 to: page04
 
-                effect: PagePushLeftEffect {
+                effect: FlowPushLeftEffect {
                     duration: 500
                 }
             },
 
-            PageTransition {
+            FlowTransition {
                 from: page02
                 to: page01
 
-                effect: PageSlideLeftEffect {
-                }
+                effect: FlowSlideLeftEffect {}
             },
 
-            PageTransition {
+            FlowTransition {
                 from: page03
                 to: page02
 
-                effect: PageSlideLeftEffect {
+                effect: FlowSlideLeftEffect {
                     duration: 500
                 }
             },
 
-            PageTransition {
+            FlowTransition {
                 id: transitionToStart
                 from: page06
                 to: page01
-                effect: PageFadeEffect {
-                }
+                effect: FlowFadeEffect {}
             }
         ]
     }
@@ -187,6 +182,7 @@ Rectangle {
         value: 0
     }
 
+
     /*
     Connections {
         target: button
@@ -200,7 +196,6 @@ Rectangle {
             })
         }
     }*/
-
     Label {
         id: label
         x: 331
diff --git a/examples/TransitionItem/Screen02.ui.qml b/examples/TransitionItem/Screen02.ui.qml
index 048fe47..6aa410e 100644
--- a/examples/TransitionItem/Screen02.ui.qml
+++ b/examples/TransitionItem/Screen02.ui.qml
@@ -30,7 +30,7 @@
 import QtQuick 2.10
 import TransitionItem 1.0
 import QtQuick.Controls 2.3
-import TransitionView 1.0
+import FlowView 1.0
 
 Rectangle {
     id: rectangle
@@ -41,7 +41,7 @@ Rectangle {
 
     state: "Screen01"
 
-    TransitionView {
+    FlowView {
         id: transitionView
         x: 111
         y: 52
@@ -49,34 +49,34 @@ Rectangle {
         height: 640
         clip: true
 
-        defaultTransition: PageTransition {
+        defaultTransition: FlowTransition {
         }
 
-        transitions: [
-            PageTransition {
+        flowTransitions: [
+            FlowTransition {
                 from: page01
                 to: page02
-                effect: PageSlideUpEffect {
+                effect: FlowSlideUpEffect {
                 }
             },
-            PageTransition {
+            FlowTransition {
                 from: page02
                 to: page01
-                effect: PageSlideDownEffect {
+                effect: FlowSlideDownEffect {
                 }
             },
 
-            PageTransition {
+            FlowTransition {
                 from: page02
                 to: page03
-                effect: PagePushRightEffect {
+                effect: FlowPushRightEffect {
                 }
             },
 
-            PageTransition {
+            FlowTransition {
                 from: page03
                 to: page01
-                effect: PageFadeEffect {
+                effect: FlowFadeEffect {
                 }
             }
         ]
diff --git a/examples/TransitionItem/Screen03.ui.qml b/examples/TransitionItem/Screen03.ui.qml
index 6007c5d..bfcd4c3 100644
--- a/examples/TransitionItem/Screen03.ui.qml
+++ b/examples/TransitionItem/Screen03.ui.qml
@@ -32,7 +32,7 @@ import QtQuick 2.12
 import TransitionItem 1.0
 import QtQuick.Controls 2.3
 import QtQuick.Timeline 1.0
-import TransitionView 1.0
+import FlowView 1.0
 
 Rectangle {
     id: rectangle
@@ -41,12 +41,12 @@ Rectangle {
 
     color: Constants.backgroundColor
 
-    TransitionList {
+    FlowTransitionList {
         id: pageList
         intialItem: page01
         items: [page01, page02, page03, page04, page05]
     }
-    TransitionView {
+    FlowView {
 
         interaction: SwipeInteraction {
             transitionView: view
@@ -148,97 +148,97 @@ Rectangle {
             }
         }
 
-        defaultTransition: PageTransition {
+        defaultTransition: FlowTransition {
         }
 
-        transitions: [
-            PageTransition {
+        flowTransitions: [
+            FlowTransition {
                 from: page01
                 to: page02
 
-                effect: PageSlideRightEffect {
+                effect: FlowSlideRightEffect {
                 }
             },
 
-            PageTransition {
+            FlowTransition {
                 from: page02
                 to: page03
 
-                effect: PageSlideRightEffect {
+                effect: FlowSlideRightEffect {
                     duration: 500
                 }
             },
-            PageTransition {
+            FlowTransition {
                 from: page03
                 to: page04
 
-                effect: PagePushRightEffect {
+                effect: FlowPushRightEffect {
                 }
             },
-            PageTransition {
+            FlowTransition {
                 from: page04
                 to: page05
 
-                effect: PagePushRightEffect {
+                effect: FlowPushRightEffect {
                     duration: 500
                 }
             },
 
-            PageTransition {
+            FlowTransition {
                 from: page05
                 to: page06
 
-                effect: PageSlideUpEffect {
+                effect: FlowSlideUpEffect {
                     easing.bezierCurve: [0.236, 0.75, 0.592, 0.862, 0.768, 0.982, 0.861, 0.936, 0.812, 0.929, 0.886, 0.96, 0.93, 0.984, 0.957, 0.986, 1, 1]
                 }
             },
 
-            PageTransition {
+            FlowTransition {
                 from: page06
                 to: page05
 
-                effect: PageSlideDownEffect {
+                effect: FlowSlideDownEffect {
                     easing.bezierCurve: [0.236, 0.75, 0.592, 0.862, 0.768, 0.982, 0.861, 0.936, 0.812, 0.929, 0.886, 0.96, 0.93, 0.984, 0.957, 0.986, 1, 1]
                 }
             },
-            PageTransition {
+            FlowTransition {
                 from: page04
                 to: page03
 
-                effect: PagePushLeftEffect {
+                effect: FlowPushLeftEffect {
                 }
             },
-            PageTransition {
+            FlowTransition {
                 from: page05
                 to: page04
 
-                effect: PagePushLeftEffect {
+                effect: FlowPushLeftEffect {
                     duration: 500
                 }
             },
 
-            PageTransition {
+            FlowTransition {
                 from: page02
                 to: page01
 
-                effect: PageSlideLeftEffect {
+                effect: FlowSlideLeftEffect {
                 }
             },
 
-            PageTransition {
+            FlowTransition {
                 from: page03
                 to: page02
 
-                effect: PageSlideLeftEffect {
+                effect: FlowSlideLeftEffect {
                     duration: 500
                 }
             },
 
-            PageTransition {
+            FlowTransition {
                 id: transitionToStart
                 from: page06
                 to: page01
-                effect: PageFadeEffect {
+                effect: FlowFadeEffect {
                 }
             }
         ]
diff --git a/examples/TransitionItem/Screen04.ui.qml b/examples/TransitionItem/Screen04.ui.qml
index 59c1b92..cafaebe 100644
--- a/examples/TransitionItem/Screen04.ui.qml
+++ b/examples/TransitionItem/Screen04.ui.qml
@@ -1,3 +1,4 @@
+
 /****************************************************************************
 **
 ** Copyright (C) 2018 The Qt Company Ltd.
@@ -28,7 +29,7 @@
 ****************************************************************************/
 import QtQuick 2.12
 import TransitionItem 1.0
-import TransitionView 1.0
+import FlowView 1.0
 
 Rectangle {
     width: 1080
@@ -41,19 +42,19 @@ Rectangle {
         list: pageList
     }
 
-    TransitionList {
+    FlowTransitionList {
         id: pageList
         intialItem: screen01
         items: [screen01, screen02, screen03]
     }
 
-    TransitionList {
+    FlowTransitionList {
         id: pageList2
         intialItem: appView
         items: [appView, settings]
     }
 
-    TransitionView {
+    FlowView {
         id: mainView
 
         anchors.fill: parent
@@ -66,22 +67,22 @@ Rectangle {
             horizontal: false
         }
 
-        transitions: [
-            PageTransition {
+        flowTransitions: [
+            FlowTransition {
                 from: appView
                 to: settings
 
-                effect: PageSlideDownEffect {
+                effect: FlowSlideDownEffect {
                     itemHeight: settings.height
                     outOpacity: 0
                 }
             },
 
-            PageTransition {
+            FlowTransition {
                 from: settings
                 to: appView
 
-                effect: PagePushUpEffect {
+                effect: FlowPushUpEffect {
                     fromItemHeight: settings.height
                     revealCurrent: true
                     inOpacity: 0.2
@@ -89,7 +90,7 @@ Rectangle {
             }
         ]
 
-        TransitionView {
+        FlowView {
             id: appView
 
             objectName: "appView"
@@ -107,40 +108,40 @@ Rectangle {
                 horizontal: true
             }
 
-            transitions: [
-                PageTransition {
+            flowTransitions: [
+                FlowTransition {
                     from: screen01
                     to: screen02
 
-                    effect: PagePushRightEffect {
+                    effect: FlowPushRightEffect {
                         scale: 0.6
                         opacity: 0
                     }
                 },
 
-                PageTransition {
+                FlowTransition {
                     from: screen02
                     to: screen03
 
-                    effect: PagePushRightEffect {
+                    effect: FlowPushRightEffect {
                         scale: 0.6
                         opacity: 0
                     }
                 },
-                PageTransition {
+                FlowTransition {
                     from: screen03
                     to: screen02
 
-                    effect: PagePushLeftEffect {
+                    effect: FlowPushLeftEffect {
                         scale: 0.6
                         opacity: 0
                     }
                 },
-                PageTransition {
+                FlowTransition {
                     from: screen02
                     to: screen01
 
-                    effect: PagePushLeftEffect {
+                    effect: FlowPushLeftEffect {
                         scale: 0.6
                         opacity: 0
                     }
diff --git a/examples/TransitionItem/Screen05.ui.qml b/examples/TransitionItem/Screen05.ui.qml
new file mode 100644
index 0000000..b90c390
--- /dev/null
+++ b/examples/TransitionItem/Screen05.ui.qml
@@ -0,0 +1,120 @@
+import QtQuick 2.12
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import TransitionItem 1.0
+import FlowView 1.0
+import QtQuick.Controls 2.3
+
+Item {
+    width: Constants.width
+    height: Constants.height
+
+    FlowView {
+        x: 401
+        y: 153
+        width: 478
+        height: 415
+        FlowItem {
+            FlowActionArea {
+                enabled: false
+
+                Connections {
+                    target: button
+                    onClicked: forwardTransition.trigger()
+                }
+            }
+
+            id: page01
+            width: 333
+            height: 319
+
+            Rectangle {
+                color: "#ffffff"
+                anchors.fill: parent
+
+                Button {
+                    id: button
+                    x: 27
+                    y: 254
+                    text: qsTr("Next")
+                }
+            }
+
+            Text {
+                id: element
+                text: qsTr("Page 01")
+                font.pixelSize: 12
+            }
+        }
+        FlowItem {
+            id: page02
+            width: 333
+            height: 319
+
+            Rectangle {
+                color: "#ffffff"
+                anchors.fill: parent
+
+                Button {
+                    id: button1
+                    x: 15
+                    y: 263
+                    text: qsTr("Back")
+                }
+            }
+
+            Text {
+                text: qsTr("Page 02")
+                font.pixelSize: 12
+            }
+
+            FlowActionArea {
+                enabled: false
+
+                Connections {
+                    target: button1
+                    onClicked: backwardTransition.trigger()
+                }
+            }
+        }
+        flowTransitions: [
+            FlowTransition {
+                id: forwardTransition
+                from: page01
+                to: page02
+            },
+            FlowTransition {
+                id: backwardTransition
+                from: page02
+                to: page01
+            }
+        ]
+    }
+}
diff --git a/examples/TransitionItem/TransitionItem.qmlproject b/examples/TransitionItem/TransitionItem.qmlproject
index b397c2e..4395520 100644
--- a/examples/TransitionItem/TransitionItem.qmlproject
+++ b/examples/TransitionItem/TransitionItem.qmlproject
@@ -28,7 +28,7 @@ Project {
 
     Environment {
         QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf"
-        QT_AUTO_SCREEN_SCALE_FACTOR: "1"
+        //QT_AUTO_SCREEN_SCALE_FACTOR: "1"
     }
 
     /* List of plugin directories passed to QML runtime */
diff --git a/examples/TransitionItem/images/svg/apple.svg b/examples/TransitionItem/images/svg/apple.svg
new file mode 100644
index 0000000..4217f66
--- /dev/null
+++ b/examples/TransitionItem/images/svg/apple.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11" height="14" viewBox="0 0 11 14">
+<path d="M10.883 9.492q-0.305 0.977-0.961 1.953-1.008 1.531-2.008 1.531-0.383 0-1.094-0.25-0.672-0.25-1.18-0.25-0.477 0-1.109 0.258-0.633 0.266-1.031 0.266-1.187 0-2.352-2.023-1.148-2.039-1.148-3.93 0-1.781 0.883-2.922 0.875-1.125 2.219-1.125 0.563 0 1.383 0.234 0.813 0.234 1.078 0.234 0.352 0 1.117-0.266 0.797-0.266 1.352-0.266 0.93 0 1.664 0.508 0.406 0.281 0.813 0.781-0.617 0.523-0.891 0.922-0.508 0.734-0.508 1.617 0 0.969 0.539 1.742t1.234 0.984zM7.945 0.328q0 0.477-0.227 1.062-0.234 0.586-0.727 1.078-0.422 0.422-0.844 0.563-0.289 0.086-0.813 0.133 0.023-1.164 0.609-2.008 0.578-0.836 1.953-1.156 0.008 0.023 0.020 0.086t0.020 0.086q0 0.031 0.004 0.078t0.004 0.078z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/archive.svg b/examples/TransitionItem/images/svg/archive.svg
new file mode 100644
index 0000000..1a36930
--- /dev/null
+++ b/examples/TransitionItem/images/svg/archive.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14">
+<path d="M8.5 6.5q0-0.203-0.148-0.352t-0.352-0.148h-2q-0.203 0-0.352 0.148t-0.148 0.352 0.148 0.352 0.352 0.148h2q0.203 0 0.352-0.148t0.148-0.352zM13 5v7.5q0 0.203-0.148 0.352t-0.352 0.148h-11q-0.203 0-0.352-0.148t-0.148-0.352v-7.5q0-0.203 0.148-0.352t0.352-0.148h11q0.203 0 0.352 0.148t0.148 0.352zM13.5 1.5v2q0 0.203-0.148 0.352t-0.352 0.148h-12q-0.203 0-0.352-0.148t-0.148-0.352v-2q0-0.203 0.148-0.352t0.352-0.148h12q0.203 0 0.352 0.148t0.148 0.352z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/area-chart.svg b/examples/TransitionItem/images/svg/area-chart.svg
new file mode 100644
index 0000000..91d3d9c
--- /dev/null
+++ b/examples/TransitionItem/images/svg/area-chart.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="14" viewBox="0 0 16 14">
+<path d="M16 12v1h-16v-12h1v11h15zM13 4l2 7h-13v-4.5l3.5-4.5 4.5 4.5z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/arrow-circle-down.svg b/examples/TransitionItem/images/svg/arrow-circle-down.svg
new file mode 100644
index 0000000..8aaf0c1
--- /dev/null
+++ b/examples/TransitionItem/images/svg/arrow-circle-down.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="14" viewBox="0 0 12 14">
+<path d="M10.031 7.008q0-0.211-0.141-0.352l-0.711-0.711q-0.141-0.141-0.352-0.141t-0.352 0.141l-1.477 1.477v-3.922q0-0.203-0.148-0.352t-0.352-0.148h-1q-0.203 0-0.352 0.148t-0.148 0.352v3.922l-1.477-1.477q-0.148-0.148-0.352-0.148t-0.352 0.148l-0.711 0.711q-0.141 0.141-0.141 0.352t0.141 0.352l3.539 3.539q0.141 0.141 0.352 0.141t0.352-0.141l3.539-3.539q0.141-0.141 0.141-0.352zM12 7q0 1.633-0.805 3.012t-2.184 2.184-3.012 0.805-3.012-0.805-2.184-2.184-0.805-3.012 0.805-3.012 2.184-2.184 3.012-0.805 3.012 0.805 2.184 2.184 0.805 3.012z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/arrow-circle-left.svg b/examples/TransitionItem/images/svg/arrow-circle-left.svg
new file mode 100644
index 0000000..55afbf0
--- /dev/null
+++ b/examples/TransitionItem/images/svg/arrow-circle-left.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="14" viewBox="0 0 12 14">
+<path d="M10 7.5v-1q0-0.203-0.148-0.352t-0.352-0.148h-3.922l1.477-1.477q0.148-0.148 0.148-0.352t-0.148-0.352l-0.711-0.711q-0.141-0.141-0.352-0.141t-0.352 0.141l-3.539 3.539q-0.141 0.141-0.141 0.352t0.141 0.352l3.539 3.539q0.141 0.141 0.352 0.141t0.352-0.141l0.711-0.711q0.141-0.141 0.141-0.352t-0.141-0.352l-1.477-1.477h3.922q0.203 0 0.352-0.148t0.148-0.352zM12 7q0 1.633-0.805 3.012t-2.184 2.184-3.012 0.805-3.012-0.805-2.184-2.184-0.805-3.012 0.805-3.012 2.184-2.184 3.012-0.805 3.012 0.805 2.184 2.184 0.805 3.012z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/arrow-circle-o-down.svg b/examples/TransitionItem/images/svg/arrow-circle-o-down.svg
new file mode 100644
index 0000000..234b338
--- /dev/null
+++ b/examples/TransitionItem/images/svg/arrow-circle-o-down.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="14" viewBox="0 0 12 14">
+<path d="M8.75 7.25q0 0.094-0.078 0.187l-2.492 2.492q-0.086 0.070-0.18 0.070t-0.18-0.070l-2.5-2.5q-0.117-0.125-0.055-0.273 0.062-0.156 0.234-0.156h1.5v-2.75q0-0.109 0.070-0.18t0.18-0.070h1.5q0.109 0 0.18 0.070t0.070 0.18v2.75h1.5q0.109 0 0.18 0.070t0.070 0.18zM6 2.75q-1.156 0-2.133 0.57t-1.547 1.547-0.57 2.133 0.57 2.133 1.547 1.547 2.133 0.57 2.133-0.57 1.547-1.547 0.57-2.133-0.57-2.133-1.547-1.547-2.133-0.57zM12 7q0 1.633-0.805 3.012t-2.184 2.184-3.012 0.805-3.012-0.805-2.184-2.184-0.805-3.012 0.805-3.012 2.184-2.184 3.012-0.805 3.012 0.805 2.184 2.184 0.805 3.012z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/arrow-circle-o-left.svg b/examples/TransitionItem/images/svg/arrow-circle-o-left.svg
new file mode 100644
index 0000000..2879dba
--- /dev/null
+++ b/examples/TransitionItem/images/svg/arrow-circle-o-left.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="14" viewBox="0 0 12 14">
+<path d="M9 6.25v1.5q0 0.102-0.074 0.176t-0.176 0.074h-2.75v1.5q0 0.109-0.070 0.18t-0.18 0.070q-0.094 0-0.187-0.078l-2.492-2.492q-0.070-0.070-0.070-0.18t0.070-0.18l2.5-2.5q0.070-0.070 0.18-0.070 0.102 0 0.176 0.074t0.074 0.176v1.5h2.75q0.102 0 0.176 0.074t0.074 0.176zM10.25 7q0-1.156-0.57-2.133t-1.547-1.547-2.133-0.57-2.133 0.57-1.547 1.547-0.57 2.133 0.57 2.133 1.547 1.547 2.133 0.57 2.133-0.57 1.547-1.547 0.57-2.133zM12 7q0 1.633-0.805 3.012t-2.184 2.184-3.012 0.805-3.012-0.805-2.184-2.184-0.805-3.012 0.805-3.012 2.184-2.184 3.012-0.805 3.012 0.805 2.184 2.184 0.805 3.012z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/arrow-circle-o-right.svg b/examples/TransitionItem/images/svg/arrow-circle-o-right.svg
new file mode 100644
index 0000000..723303c
--- /dev/null
+++ b/examples/TransitionItem/images/svg/arrow-circle-o-right.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="14" viewBox="0 0 12 14">
+<path d="M9 7q0 0.109-0.070 0.18l-2.5 2.5q-0.070 0.070-0.18 0.070-0.102 0-0.176-0.074t-0.074-0.176v-1.5h-2.75q-0.102 0-0.176-0.074t-0.074-0.176v-1.5q0-0.102 0.074-0.176t0.176-0.074h2.75v-1.5q0-0.109 0.070-0.18t0.18-0.070q0.094 0 0.187 0.078l2.492 2.492q0.070 0.070 0.070 0.18zM10.25 7q0-1.156-0.57-2.133t-1.547-1.547-2.133-0.57-2.133 0.57-1.547 1.547-0.57 2.133 0.57 2.133 1.547 1.547 2.133 0.57 2.133-0.57 1.547-1.547 0.57-2.133zM12 7q0 1.633-0.805 3.012t-2.184 2.184-3.012 0.805-3.012-0.805-2.184-2.184-0.805-3.012 0.805-3.012 2.184-2.184 3.012-0.805 3.012 0.805 2.184 2.184 0.805 3.012z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/arrow-circle-o-up.svg b/examples/TransitionItem/images/svg/arrow-circle-o-up.svg
new file mode 100644
index 0000000..4202da4
--- /dev/null
+++ b/examples/TransitionItem/images/svg/arrow-circle-o-up.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="14" viewBox="0 0 12 14">
+<path d="M8.734 6.844q-0.062 0.156-0.234 0.156h-1.5v2.75q0 0.109-0.070 0.18t-0.18 0.070h-1.5q-0.109 0-0.18-0.070t-0.070-0.18v-2.75h-1.5q-0.109 0-0.18-0.070t-0.070-0.18q0-0.094 0.078-0.187l2.492-2.492q0.086-0.070 0.18-0.070t0.18 0.070l2.5 2.5q0.117 0.125 0.055 0.273zM6 2.75q-1.156 0-2.133 0.57t-1.547 1.547-0.57 2.133 0.57 2.133 1.547 1.547 2.133 0.57 2.133-0.57 1.547-1.547 0.57-2.133-0.57-2.133-1.547-1.547-2.133-0.57zM12 7q0 1.633-0.805 3.012t-2.184 2.184-3.012 0.805-3.012-0.805-2.184-2.184-0.805-3.012 0.805-3.012 2.184-2.184 3.012-0.805 3.012 0.805 2.184 2.184 0.805 3.012z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/arrow-circle-right.svg b/examples/TransitionItem/images/svg/arrow-circle-right.svg
new file mode 100644
index 0000000..94fc46c
--- /dev/null
+++ b/examples/TransitionItem/images/svg/arrow-circle-right.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="14" viewBox="0 0 12 14">
+<path d="M10.039 7q0-0.211-0.141-0.352l-3.539-3.539q-0.141-0.141-0.352-0.141t-0.352 0.141l-0.711 0.711q-0.141 0.141-0.141 0.352t0.141 0.352l1.477 1.477h-3.922q-0.203 0-0.352 0.148t-0.148 0.352v1q0 0.203 0.148 0.352t0.352 0.148h3.922l-1.477 1.477q-0.148 0.148-0.148 0.352t0.148 0.352l0.711 0.711q0.141 0.141 0.352 0.141t0.352-0.141l3.539-3.539q0.141-0.141 0.141-0.352zM12 7q0 1.633-0.805 3.012t-2.184 2.184-3.012 0.805-3.012-0.805-2.184-2.184-0.805-3.012 0.805-3.012 2.184-2.184 3.012-0.805 3.012 0.805 2.184 2.184 0.805 3.012z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/arrow-circle-up.svg b/examples/TransitionItem/images/svg/arrow-circle-up.svg
new file mode 100644
index 0000000..cec3c18
--- /dev/null
+++ b/examples/TransitionItem/images/svg/arrow-circle-up.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="14" viewBox="0 0 12 14">
+<path d="M10.031 6.992q0-0.211-0.141-0.352l-3.539-3.539q-0.141-0.141-0.352-0.141t-0.352 0.141l-3.539 3.539q-0.141 0.141-0.141 0.352t0.141 0.352l0.711 0.711q0.141 0.141 0.352 0.141t0.352-0.141l1.477-1.477v3.922q0 0.203 0.148 0.352t0.352 0.148h1q0.203 0 0.352-0.148t0.148-0.352v-3.922l1.477 1.477q0.148 0.148 0.352 0.148t0.352-0.148l0.711-0.711q0.141-0.141 0.141-0.352zM12 7q0 1.633-0.805 3.012t-2.184 2.184-3.012 0.805-3.012-0.805-2.184-2.184-0.805-3.012 0.805-3.012 2.184-2.184 3.012-0.805 3.012 0.805 2.184 2.184 0.805 3.012z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/arrow-down.svg b/examples/TransitionItem/images/svg/arrow-down.svg
new file mode 100644
index 0000000..2cd6cbf
--- /dev/null
+++ b/examples/TransitionItem/images/svg/arrow-down.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13" height="14" viewBox="0 0 13 14">
+<path d="M12.586 6.5q0 0.414-0.289 0.703l-5.086 5.094q-0.305 0.289-0.711 0.289-0.414 0-0.703-0.289l-5.086-5.094q-0.297-0.281-0.297-0.703 0-0.414 0.297-0.711l0.578-0.586q0.305-0.289 0.711-0.289 0.414 0 0.703 0.289l2.297 2.297v-5.5q0-0.406 0.297-0.703t0.703-0.297h1q0.406 0 0.703 0.297t0.297 0.703v5.5l2.297-2.297q0.289-0.289 0.703-0.289 0.406 0 0.711 0.289l0.586 0.586q0.289 0.305 0.289 0.711z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/arrow-left.svg b/examples/TransitionItem/images/svg/arrow-left.svg
new file mode 100644
index 0000000..b30c869
--- /dev/null
+++ b/examples/TransitionItem/images/svg/arrow-left.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13" height="14" viewBox="0 0 13 14">
+<path d="M12 7v1q0 0.414-0.254 0.707t-0.66 0.293h-5.5l2.289 2.297q0.297 0.281 0.297 0.703t-0.297 0.703l-0.586 0.594q-0.289 0.289-0.703 0.289-0.406 0-0.711-0.289l-5.086-5.094q-0.289-0.289-0.289-0.703 0-0.406 0.289-0.711l5.086-5.078q0.297-0.297 0.711-0.297 0.406 0 0.703 0.297l0.586 0.578q0.297 0.297 0.297 0.711t-0.297 0.711l-2.289 2.289h5.5q0.406 0 0.66 0.293t0.254 0.707z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/arrow-right.svg b/examples/TransitionItem/images/svg/arrow-right.svg
new file mode 100644
index 0000000..98ec83d
--- /dev/null
+++ b/examples/TransitionItem/images/svg/arrow-right.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11" height="14" viewBox="0 0 11 14">
+<path d="M11.5 7.5q0 0.422-0.289 0.711l-5.086 5.086q-0.305 0.289-0.711 0.289-0.398 0-0.703-0.289l-0.586-0.586q-0.297-0.297-0.297-0.711t0.297-0.711l2.289-2.289h-5.5q-0.406 0-0.66-0.293t-0.254-0.707v-1q0-0.414 0.254-0.707t0.66-0.293h5.5l-2.289-2.297q-0.297-0.281-0.297-0.703t0.297-0.703l0.586-0.586q0.297-0.297 0.703-0.297 0.414 0 0.711 0.297l5.086 5.086q0.289 0.273 0.289 0.703z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/arrow-up.svg b/examples/TransitionItem/images/svg/arrow-up.svg
new file mode 100644
index 0000000..ac0f265
--- /dev/null
+++ b/examples/TransitionItem/images/svg/arrow-up.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13" height="14" viewBox="0 0 13 14">
+<path d="M12.586 7.586q0 0.398-0.289 0.703l-0.586 0.586q-0.297 0.297-0.711 0.297-0.422 0-0.703-0.297l-2.297-2.289v5.5q0 0.406-0.293 0.66t-0.707 0.254h-1q-0.414 0-0.707-0.254t-0.293-0.66v-5.5l-2.297 2.289q-0.281 0.297-0.703 0.297t-0.703-0.297l-0.586-0.586q-0.297-0.297-0.297-0.703 0-0.414 0.297-0.711l5.086-5.086q0.273-0.289 0.703-0.289 0.422 0 0.711 0.289l5.086 5.086q0.289 0.305 0.289 0.711z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/arrows-alt.svg b/examples/TransitionItem/images/svg/arrows-alt.svg
new file mode 100644
index 0000000..cc6e8e5
--- /dev/null
+++ b/examples/TransitionItem/images/svg/arrows-alt.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="14" viewBox="0 0 12 14">
+<path d="M10.023 4.227l-2.773 2.773 2.773 2.773 1.125-1.125q0.227-0.242 0.547-0.109 0.305 0.133 0.305 0.461v3.5q0 0.203-0.148 0.352t-0.352 0.148h-3.5q-0.328 0-0.461-0.312-0.133-0.305 0.109-0.539l1.125-1.125-2.773-2.773-2.773 2.773 1.125 1.125q0.242 0.234 0.109 0.539-0.133 0.312-0.461 0.312h-3.5q-0.203 0-0.352-0.148t-0.148-0.352v-3.5q0-0.328 0.312-0.461 0.305-0.133 0.539 0.109l1.125 1.125 2.773-2.773-2.773-2.773-1.125 1.125q-0.148 0.148-0.352 0.148-0.094 0-0.187-0.039-0.312-0.133-0.312-0.461v-3.5q0-0.203 0.148-0.352t0.352-0.148h3.5q0.328 0 0.461 0.312 0.133 0.305-0.109 0.539l-1.125 1.125 2.773 2.773 2.773-2.773-1.125-1.125q-0.242-0.234-0.109-0.539 0.133-0.312 0.461-0.312h3.5q0.203 0 0.352 0.148t0.148 0.352v3.5q0 0.328-0.305 0.461-0.102 0.039-0.195 0.039-0.203 0-0.352-0.148z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/arrows-h.svg b/examples/TransitionItem/images/svg/arrows-h.svg
new file mode 100644
index 0000000..0b912e8
--- /dev/null
+++ b/examples/TransitionItem/images/svg/arrows-h.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14">
+<path d="M14 7q0 0.203-0.148 0.352l-2 2q-0.148 0.148-0.352 0.148t-0.352-0.148-0.148-0.352v-1h-8v1q0 0.203-0.148 0.352t-0.352 0.148-0.352-0.148l-2-2q-0.148-0.148-0.148-0.352t0.148-0.352l2-2q0.148-0.148 0.352-0.148t0.352 0.148 0.148 0.352v1h8v-1q0-0.203 0.148-0.352t0.352-0.148 0.352 0.148l2 2q0.148 0.148 0.148 0.352z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/arrows-v.svg b/examples/TransitionItem/images/svg/arrows-v.svg
new file mode 100644
index 0000000..aee7225
--- /dev/null
+++ b/examples/TransitionItem/images/svg/arrows-v.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6" height="14" viewBox="0 0 6 14">
+<path d="M5.5 2.5q0 0.203-0.148 0.352t-0.352 0.148h-1v8h1q0.203 0 0.352 0.148t0.148 0.352-0.148 0.352l-2 2q-0.148 0.148-0.352 0.148t-0.352-0.148l-2-2q-0.148-0.148-0.148-0.352t0.148-0.352 0.352-0.148h1v-8h-1q-0.203 0-0.352-0.148t-0.148-0.352 0.148-0.352l2-2q0.148-0.148 0.352-0.148t0.352 0.148l2 2q0.148 0.148 0.148 0.352z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/arrows.svg b/examples/TransitionItem/images/svg/arrows.svg
new file mode 100644
index 0000000..f4d7c4e
--- /dev/null
+++ b/examples/TransitionItem/images/svg/arrows.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14">
+<path d="M14 7q0 0.203-0.148 0.352l-2 2q-0.148 0.148-0.352 0.148t-0.352-0.148-0.148-0.352v-1h-3v3h1q0.203 0 0.352 0.148t0.148 0.352-0.148 0.352l-2 2q-0.148 0.148-0.352 0.148t-0.352-0.148l-2-2q-0.148-0.148-0.148-0.352t0.148-0.352 0.352-0.148h1v-3h-3v1q0 0.203-0.148 0.352t-0.352 0.148-0.352-0.148l-2-2q-0.148-0.148-0.148-0.352t0.148-0.352l2-2q0.148-0.148 0.352-0.148t0.352 0.148 0.148 0.352v1h3v-3h-1q-0.203 0-0.352-0.148t-0.148-0.352 0.148-0.352l2-2q0.148-0.148 0.352-0.148t0.352 0.148l2 2q0.148 0.148 0.148 0.352t-0.148 0.352-0.352 0.148h-1v3h3v-1q0-0.203 0.148-0.352t0.352-0.148 0.352 0.148l2 2q0.148 0.148 0.148 0.352z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/assistive-listening-systems.svg b/examples/TransitionItem/images/svg/assistive-listening-systems.svg
new file mode 100644
index 0000000..c06dd2d
--- /dev/null
+++ b/examples/TransitionItem/images/svg/assistive-listening-systems.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14">
+<path d="M1 13.5q0 0.203-0.148 0.352t-0.352 0.148-0.352-0.148-0.148-0.352 0.148-0.352 0.352-0.148 0.352 0.148 0.148 0.352zM2.5 12q0 0.203-0.148 0.352t-0.352 0.148-0.352-0.148-0.148-0.352 0.148-0.352 0.352-0.148 0.352 0.148 0.148 0.352zM2.852 9.148l2 2-0.703 0.703-2-2zM5.5 9q0 0.203-0.148 0.352t-0.352 0.148-0.352-0.148-0.148-0.352 0.148-0.352 0.352-0.148 0.352 0.148 0.148 0.352zM11.023 6.5q0 0.461-0.090 0.848t-0.293 0.73-0.344 0.527-0.414 0.504q-0.242 0.273-0.355 0.422t-0.262 0.391-0.207 0.5-0.059 0.578q0 1.242-0.879 2.121t-2.121 0.879q-0.203 0-0.352-0.148t-0.148-0.352 0.148-0.352 0.352-0.148q0.828 0 1.414-0.586t0.586-1.414q0-0.445 0.090-0.824t0.289-0.711 0.34-0.52 0.406-0.492q0.312-0.359 0.465-0.563t0.293-0.582 0.141-0.809q0-1.445-1.027-2.473t-2.473-1.027-2.473 1.027-1.027 2.473q0 0.203-0.148 0.352t-0.352 0.148-0.352-0.148-0.148-0.352q0-0.914 0.355-1.746t0.961-1.438 1.438-0.961 1.746-0.355 1.746 0.355 1.438 0.961 0.961 1.438 0.355 1.746zM7 7.5q0 0.203-0.148 0.352t-0.352 0.148-0.352-0.148-0.148-0.352 0.148-0.352 0.352-0.148 0.352 0.148 0.148 0.352zM9.25 6.5q0 0.203-0.148 0.352t-0.352 0.148-0.352-0.148-0.148-0.352q0-0.727-0.512-1.238t-1.238-0.512q-0.719 0-1.234 0.512t-0.516 1.238q0 0.203-0.148 0.352t-0.352 0.148-0.352-0.148-0.148-0.352q0-1.141 0.805-1.945t1.945-0.805 1.945 0.805 0.805 1.945zM12.328 4.242q0.078 0.195-0.008 0.383t-0.281 0.266q-0.070 0.031-0.18 0.031-0.148 0-0.277-0.086t-0.184-0.234q-0.531-1.391-1.75-2.305-0.164-0.125-0.195-0.328t0.094-0.367q0.133-0.164 0.336-0.195t0.367 0.094q1.43 1.070 2.078 2.742zM13.969 3.609q0.070 0.195-0.012 0.383t-0.277 0.266q-0.086 0.031-0.18 0.031-0.344 0-0.469-0.32-0.719-1.859-2.32-3.070-0.172-0.125-0.199-0.328t0.098-0.367q0.125-0.172 0.328-0.199t0.367 0.098q1.836 1.367 2.664 3.508z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/asterisk.svg b/examples/TransitionItem/images/svg/asterisk.svg
new file mode 100644
index 0000000..eea75bd
--- /dev/null
+++ b/examples/TransitionItem/images/svg/asterisk.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13" height="14" viewBox="0 0 13 14">
+<path d="M11.578 8.203q0.359 0.203 0.465 0.605t-0.098 0.762l-0.5 0.859q-0.203 0.359-0.605 0.465t-0.762-0.098l-2.078-1.195v2.398q0 0.406-0.297 0.703t-0.703 0.297h-1q-0.406 0-0.703-0.297t-0.297-0.703v-2.398l-2.078 1.195q-0.359 0.203-0.762 0.098t-0.605-0.465l-0.5-0.859q-0.203-0.359-0.098-0.762t0.465-0.605l2.078-1.203-2.078-1.203q-0.359-0.203-0.465-0.605t0.098-0.762l0.5-0.859q0.203-0.359 0.605-0.465t0.762 0.098l2.078 1.195v-2.398q0-0.406 0.297-0.703t0.703-0.297h1q0.406 0 0.703 0.297t0.297 0.703v2.398l2.078-1.195q0.359-0.203 0.762-0.098t0.605 0.465l0.5 0.859q0.203 0.359 0.098 0.762t-0.465 0.605l-2.078 1.203z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/at.svg b/examples/TransitionItem/images/svg/at.svg
new file mode 100644
index 0000000..8702b47
--- /dev/null
+++ b/examples/TransitionItem/images/svg/at.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="14" viewBox="0 0 12 14">
+<path d="M7.594 6.055q0-0.844-0.418-1.32t-1.152-0.477q-0.492 0-0.969 0.238t-0.859 0.66-0.621 1.070-0.238 1.406q0 0.875 0.418 1.352t1.176 0.477q0.75 0 1.375-0.52t0.957-1.297 0.332-1.59zM12 7q0 0.867-0.289 1.539t-0.77 1.055-1.027 0.582-1.133 0.215q-0.047 0-0.121 0.004t-0.129 0.004q-0.742 0-1.109-0.414-0.219-0.258-0.258-0.648-0.406 0.516-1.027 0.859t-1.355 0.344q-1.258 0-1.949-0.746t-0.691-2.105q0-1.227 0.516-2.266t1.398-1.645 1.922-0.605q0.68 0 1.211 0.277t0.828 0.777l0.016-0.148 0.086-0.438q0.008-0.047 0.043-0.094t0.074-0.047h0.922q0.039 0 0.102 0.086 0.039 0.039 0.023 0.125l-0.937 4.797q-0.039 0.187-0.039 0.375 0 0.305 0.098 0.406t0.348 0.102q0.219-0.008 0.445-0.043t0.57-0.187 0.602-0.391 0.445-0.699 0.187-1.070q0-2.281-1.359-3.641t-3.641-1.359q-1.016 0-1.941 0.398t-1.594 1.066-1.066 1.594-0.398 1.941 0.398 1.941 1.066 1.594 1.594 1.066 1.941 0.398q1.781 0 3.164-1.125 0.086-0.070 0.187-0.062t0.164 0.094l0.32 0.383q0.062 0.094 0.055 0.187-0.016 0.102-0.094 0.172-0.797 0.648-1.777 1t-2.020 0.352q-1.219 0-2.328-0.477t-1.914-1.281-1.281-1.914-0.477-2.328 0.477-2.328 1.281-1.914 1.914-1.281 2.328-0.477q2.687 0 4.344 1.656t1.656 4.344z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/audio-description.svg b/examples/TransitionItem/images/svg/audio-description.svg
new file mode 100644
index 0000000..c115d4c
--- /dev/null
+++ b/examples/TransitionItem/images/svg/audio-description.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="14" viewBox="0 0 18 14">
+<path d="M3.938 7.766h1.336l-0.008-2.070zM11.953 6.992q0-0.68-0.395-1.094t-1.145-0.414h-0.422v3.031h0.406q0.711 0 1.133-0.445t0.422-1.078zM7.469 4.047l0.008 5.906q0 0.109-0.074 0.187t-0.184 0.078h-1.688q-0.109 0-0.184-0.078t-0.074-0.187v-0.484h-2.273l-0.43 0.633q-0.078 0.117-0.219 0.117h-2.086q-0.164 0-0.238-0.141t0.027-0.273l4.344-5.914q0.070-0.109 0.211-0.109h2.594q0.109 0 0.187 0.078t0.078 0.187zM13.93 6.992q0 1.508-0.98 2.367t-2.535 0.859h-2.109q-0.109 0-0.187-0.078t-0.078-0.187v-5.906q0-0.109 0.078-0.187t0.187-0.078h2.094q1.563 0 2.547 0.852t0.984 2.359zM15.148 7q0 0.086-0.004 0.227t-0.062 0.559-0.168 0.797-0.348 0.844-0.574 0.801h-0.398q0.297-0.352 0.52-0.816t0.324-0.875 0.164-0.766 0.070-0.566l0.008-0.211q0-0.062-0.004-0.176t-0.059-0.469-0.156-0.715-0.32-0.871-0.516-0.973h0.336q0.32 0.367 0.563 0.836t0.355 0.871 0.18 0.75 0.082 0.551zM16.586 7q0 0.086-0.004 0.227t-0.062 0.559-0.168 0.797-0.352 0.844-0.578 0.801h-0.398q0.297-0.352 0.52-0.816t0.324-0.875 0.164-0.766 0.070-0.566l0.008-0.211q0-0.062-0.004-0.176t-0.059-0.469-0.152-0.715-0.316-0.871-0.516-0.973h0.336q0.32 0.367 0.563 0.836t0.355 0.871 0.18 0.75 0.082 0.551zM18 7q0 0.086-0.004 0.227t-0.062 0.559-0.168 0.797-0.348 0.844-0.574 0.801h-0.398q0.297-0.352 0.516-0.816t0.32-0.875 0.164-0.766 0.070-0.566l0.008-0.211q0-0.062-0.004-0.176t-0.059-0.469-0.152-0.715-0.316-0.871-0.516-0.973h0.336q0.32 0.367 0.563 0.836t0.355 0.871 0.18 0.75 0.074 0.551z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/automobile.svg b/examples/TransitionItem/images/svg/automobile.svg
new file mode 100644
index 0000000..306a77b
--- /dev/null
+++ b/examples/TransitionItem/images/svg/automobile.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="14" viewBox="0 0 16 14">
+<path d="M3.75 8.5q0-0.516-0.367-0.883t-0.883-0.367-0.883 0.367-0.367 0.883 0.367 0.883 0.883 0.367 0.883-0.367 0.367-0.883zM4.031 6h7.937l-0.695-2.789q-0.016-0.062-0.109-0.137t-0.164-0.074h-6q-0.070 0-0.164 0.074t-0.109 0.137zM14.75 8.5q0-0.516-0.367-0.883t-0.883-0.367-0.883 0.367-0.367 0.883 0.367 0.883 0.883 0.367 0.883-0.367 0.367-0.883zM16 7.75v3q0 0.109-0.070 0.18t-0.18 0.070h-0.75v1q0 0.625-0.438 1.062t-1.062 0.438-1.062-0.438-0.438-1.062v-1h-8v1q0 0.625-0.438 1.062t-1.062 0.438-1.062-0.438-0.438-1.062v-1h-0.75q-0.109 0-0.18-0.070t-0.070-0.18v-3q0-0.727 0.512-1.238t1.238-0.512h0.219l0.82-3.273q0.18-0.734 0.813-1.23t1.398-0.496h6q0.766 0 1.398 0.496t0.813 1.23l0.82 3.273h0.219q0.727 0 1.238 0.512t0.512 1.238z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/backward.svg b/examples/TransitionItem/images/svg/backward.svg
new file mode 100644
index 0000000..1eb3dd1
--- /dev/null
+++ b/examples/TransitionItem/images/svg/backward.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14">
+<path d="M12.648 1.102q0.148-0.148 0.25-0.102t0.102 0.25v11.5q0 0.203-0.102 0.25t-0.25-0.102l-5.547-5.547q-0.062-0.070-0.102-0.148v5.547q0 0.203-0.102 0.25t-0.25-0.102l-5.547-5.547q-0.148-0.148-0.148-0.352t0.148-0.352l5.547-5.547q0.148-0.148 0.25-0.102t0.102 0.25v5.547q0.039-0.086 0.102-0.148z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/balance-scale.svg b/examples/TransitionItem/images/svg/balance-scale.svg
new file mode 100644
index 0000000..3f20e9a
--- /dev/null
+++ b/examples/TransitionItem/images/svg/balance-scale.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17" height="14" viewBox="0 0 17 14">
+<path d="M13.5 3.5l-3 5.5h6zM3.5 3.5l-3 5.5h6zM9.914 2q-0.109 0.312-0.355 0.559t-0.559 0.355v10.086h4.75q0.109 0 0.18 0.070t0.070 0.18v0.5q0 0.109-0.070 0.18t-0.18 0.070h-10.5q-0.109 0-0.18-0.070t-0.070-0.18v-0.5q0-0.109 0.070-0.18t0.18-0.070h4.75v-10.086q-0.312-0.109-0.559-0.355t-0.355-0.559h-3.836q-0.109 0-0.18-0.070t-0.070-0.18v-0.5q0-0.109 0.070-0.18t0.18-0.070h3.836q0.164-0.445 0.547-0.723t0.867-0.277 0.867 0.277 0.547 0.723h3.836q0.109 0 0.18 0.070t0.070 0.18v0.5q0 0.109-0.070 0.18t-0.18 0.070h-3.836zM8.5 2.125q0.258 0 0.441-0.184t0.184-0.441-0.184-0.441-0.441-0.184-0.441 0.184-0.184 0.441 0.184 0.441 0.441 0.184zM17 9q0 0.57-0.363 1.023t-0.918 0.711-1.129 0.387-1.090 0.129-1.090-0.129-1.129-0.387-0.918-0.711-0.363-1.023q0-0.086 0.273-0.633t0.719-1.363 0.836-1.527 0.797-1.438 0.438-0.781q0.141-0.258 0.438-0.258t0.438 0.258q0.031 0.055 0.438 0.781t0.797 1.438 0.836 1.527 0.719 1.363 0.273 0.633zM7 9q0 0.57-0.363 1.023t-0.918 0.711-1.129 0.387-1.090 0.129-1.090-0.129-1.129-0.387-0.918-0.711-0.363-1.023q0-0.086 0.273-0.633t0.719-1.363 0.836-1.527 0.797-1.438 0.438-0.781q0.141-0.258 0.438-0.258t0.438 0.258q0.031 0.055 0.438 0.781t0.797 1.438 0.836 1.527 0.719 1.363 0.273 0.633z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/ban.svg b/examples/TransitionItem/images/svg/ban.svg
new file mode 100644
index 0000000..6425087
--- /dev/null
+++ b/examples/TransitionItem/images/svg/ban.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="14" viewBox="0 0 12 14">
+<path d="M10.25 6.977q0-1.258-0.68-2.305l-5.891 5.883q1.070 0.695 2.32 0.695 0.867 0 1.652-0.34t1.355-0.91 0.906-1.363 0.336-1.66zM2.445 9.313l5.898-5.891q-1.055-0.711-2.344-0.711-1.156 0-2.133 0.57t-1.547 1.555-0.57 2.141q0 1.266 0.695 2.336zM12 6.977q0 1.227-0.477 2.344t-1.277 1.922-1.914 1.281-2.332 0.477-2.332-0.477-1.914-1.281-1.277-1.922-0.477-2.344 0.477-2.34 1.277-1.918 1.914-1.281 2.332-0.477 2.332 0.477 1.914 1.281 1.277 1.918 0.477 2.34z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/bank.svg b/examples/TransitionItem/images/svg/bank.svg
new file mode 100644
index 0000000..3c03cac
--- /dev/null
+++ b/examples/TransitionItem/images/svg/bank.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="14" viewBox="0 0 15 14">
+<path d="M7.5 0l7.5 3v1h-1q0 0.203-0.16 0.352t-0.379 0.148h-11.922q-0.219 0-0.379-0.148t-0.16-0.352h-1v-1zM2 5h2v6h1v-6h2v6h1v-6h2v6h1v-6h2v6h0.461q0.219 0 0.379 0.148t0.16 0.352v0.5h-13v-0.5q0-0.203 0.16-0.352t0.379-0.148h0.461v-6zM14.461 12.5q0.219 0 0.379 0.148t0.16 0.352v1h-15v-1q0-0.203 0.16-0.352t0.379-0.148h13.922z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/bar-chart.svg b/examples/TransitionItem/images/svg/bar-chart.svg
new file mode 100644
index 0000000..8479605
--- /dev/null
+++ b/examples/TransitionItem/images/svg/bar-chart.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="14" viewBox="0 0 16 14">
+<path d="M5 7v4h-2v-4h2zM8 3v8h-2v-8h2zM16 12v1h-16v-12h1v11h15zM11 5v6h-2v-6h2zM14 2v9h-2v-9h2z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/barcode.svg b/examples/TransitionItem/images/svg/barcode.svg
new file mode 100644
index 0000000..28cec38
--- /dev/null
+++ b/examples/TransitionItem/images/svg/barcode.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14">
+<path d="M0.492 12h-0.492v-11h0.492v11zM0.984 11.992h-0.25v-10.992h0.25v10.992zM1.719 11.992h-0.242v-10.992h0.242v10.992zM2.945 11.992h-0.242v-10.992h0.242v10.992zM4.172 11.992h-0.484v-10.992h0.484v10.992zM5.156 11.992h-0.242v-10.992h0.242v10.992zM5.648 11.992h-0.242v-10.992h0.242v10.992zM6.141 11.992h-0.242v-10.992h0.242v10.992zM7.367 11.992h-0.492v-10.992h0.492v10.992zM8.594 11.992h-0.492v-10.992h0.492v10.992zM9.578 11.992h-0.492v-10.992h0.492v10.992zM10.562 11.992h-0.492v-10.992h0.492v10.992zM11.297 11.992h-0.492v-10.992h0.492v10.992zM12.773 11.992h-0.734v-10.992h0.734v10.992zM13.266 11.992h-0.25v-10.992h0.25v10.992zM14 12h-0.492v-11h0.492v11z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/bars.svg b/examples/TransitionItem/images/svg/bars.svg
new file mode 100644
index 0000000..7e2c8b9
--- /dev/null
+++ b/examples/TransitionItem/images/svg/bars.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="14" viewBox="0 0 12 14">
+<path d="M12 10.5v1q0 0.203-0.148 0.352t-0.352 0.148h-11q-0.203 0-0.352-0.148t-0.148-0.352v-1q0-0.203 0.148-0.352t0.352-0.148h11q0.203 0 0.352 0.148t0.148 0.352zM12 6.5v1q0 0.203-0.148 0.352t-0.352 0.148h-11q-0.203 0-0.352-0.148t-0.148-0.352v-1q0-0.203 0.148-0.352t0.352-0.148h11q0.203 0 0.352 0.148t0.148 0.352zM12 2.5v1q0 0.203-0.148 0.352t-0.352 0.148h-11q-0.203 0-0.352-0.148t-0.148-0.352v-1q0-0.203 0.148-0.352t0.352-0.148h11q0.203 0 0.352 0.148t0.148 0.352z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/battery-0.svg b/examples/TransitionItem/images/svg/battery-0.svg
new file mode 100644
index 0000000..7cec2ce
--- /dev/null
+++ b/examples/TransitionItem/images/svg/battery-0.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="14" viewBox="0 0 18 14">
+<path d="M17 4.5q0.414 0 0.707 0.293t0.293 0.707v3q0 0.414-0.293 0.707t-0.707 0.293v1.25q0 0.516-0.367 0.883t-0.883 0.367h-14.5q-0.516 0-0.883-0.367t-0.367-0.883v-7.5q0-0.516 0.367-0.883t0.883-0.367h14.5q0.516 0 0.883 0.367t0.367 0.883v1.25zM17 8.5v-3h-1v-2.25q0-0.109-0.070-0.18t-0.18-0.070h-14.5q-0.109 0-0.18 0.070t-0.070 0.18v7.5q0 0.109 0.070 0.18t0.18 0.070h14.5q0.109 0 0.18-0.070t0.070-0.18v-2.25h1z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/battery-1.svg b/examples/TransitionItem/images/svg/battery-1.svg
new file mode 100644
index 0000000..a30e18e
--- /dev/null
+++ b/examples/TransitionItem/images/svg/battery-1.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="14" viewBox="0 0 18 14">
+<path d="M2 10v-6h4v6h-4zM17 4.5q0.414 0 0.707 0.293t0.293 0.707v3q0 0.414-0.293 0.707t-0.707 0.293v1.25q0 0.516-0.367 0.883t-0.883 0.367h-14.5q-0.516 0-0.883-0.367t-0.367-0.883v-7.5q0-0.516 0.367-0.883t0.883-0.367h14.5q0.516 0 0.883 0.367t0.367 0.883v1.25zM17 8.5v-3h-1v-2.25q0-0.109-0.070-0.18t-0.18-0.070h-14.5q-0.109 0-0.18 0.070t-0.070 0.18v7.5q0 0.109 0.070 0.18t0.18 0.070h14.5q0.109 0 0.18-0.070t0.070-0.18v-2.25h1z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/battery-2.svg b/examples/TransitionItem/images/svg/battery-2.svg
new file mode 100644
index 0000000..3e50872
--- /dev/null
+++ b/examples/TransitionItem/images/svg/battery-2.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="14" viewBox="0 0 18 14">
+<path d="M2 10v-6h7v6h-7zM17 4.5q0.414 0 0.707 0.293t0.293 0.707v3q0 0.414-0.293 0.707t-0.707 0.293v1.25q0 0.516-0.367 0.883t-0.883 0.367h-14.5q-0.516 0-0.883-0.367t-0.367-0.883v-7.5q0-0.516 0.367-0.883t0.883-0.367h14.5q0.516 0 0.883 0.367t0.367 0.883v1.25zM17 8.5v-3h-1v-2.25q0-0.109-0.070-0.18t-0.18-0.070h-14.5q-0.109 0-0.18 0.070t-0.070 0.18v7.5q0 0.109 0.070 0.18t0.18 0.070h14.5q0.109 0 0.18-0.070t0.070-0.18v-2.25h1z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/battery-3.svg b/examples/TransitionItem/images/svg/battery-3.svg
new file mode 100644
index 0000000..629e832
--- /dev/null
+++ b/examples/TransitionItem/images/svg/battery-3.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="14" viewBox="0 0 18 14">
+<path d="M2 10v-6h10v6h-10zM17 4.5q0.414 0 0.707 0.293t0.293 0.707v3q0 0.414-0.293 0.707t-0.707 0.293v1.25q0 0.516-0.367 0.883t-0.883 0.367h-14.5q-0.516 0-0.883-0.367t-0.367-0.883v-7.5q0-0.516 0.367-0.883t0.883-0.367h14.5q0.516 0 0.883 0.367t0.367 0.883v1.25zM17 8.5v-3h-1v-2.25q0-0.109-0.070-0.18t-0.18-0.070h-14.5q-0.109 0-0.18 0.070t-0.070 0.18v7.5q0 0.109 0.070 0.18t0.18 0.070h14.5q0.109 0 0.18-0.070t0.070-0.18v-2.25h1z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/battery-4.svg b/examples/TransitionItem/images/svg/battery-4.svg
new file mode 100644
index 0000000..fa21dde
--- /dev/null
+++ b/examples/TransitionItem/images/svg/battery-4.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="14" viewBox="0 0 18 14">
+<path d="M15 4v6h-13v-6h13zM16 8.5h1v-3h-1v-2.25q0-0.109-0.070-0.18t-0.18-0.070h-14.5q-0.109 0-0.18 0.070t-0.070 0.18v7.5q0 0.109 0.070 0.18t0.18 0.070h14.5q0.109 0 0.18-0.070t0.070-0.18v-2.25zM18 5.5v3q0 0.414-0.293 0.707t-0.707 0.293v1.25q0 0.516-0.367 0.883t-0.883 0.367h-14.5q-0.516 0-0.883-0.367t-0.367-0.883v-7.5q0-0.516 0.367-0.883t0.883-0.367h14.5q0.516 0 0.883 0.367t0.367 0.883v1.25q0.414 0 0.707 0.293t0.293 0.707z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/bed.svg b/examples/TransitionItem/images/svg/bed.svg
new file mode 100644
index 0000000..78bb15a
--- /dev/null
+++ b/examples/TransitionItem/images/svg/bed.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="14" viewBox="0 0 16 14">
+<path d="M2 8h13.5q0.203 0 0.352 0.148t0.148 0.352v3.5h-2v-2h-12v2h-2v-9.5q0-0.203 0.148-0.352t0.352-0.148h1q0.203 0 0.352 0.148t0.148 0.352v5.5zM6.5 5.5q0-0.828-0.586-1.414t-1.414-0.586-1.414 0.586-0.586 1.414 0.586 1.414 1.414 0.586 1.414-0.586 0.586-1.414zM16 7.5v-0.5q0-1.242-0.879-2.121t-2.121-0.879h-5.5q-0.203 0-0.352 0.148t-0.148 0.352v3h9z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/beer.svg b/examples/TransitionItem/images/svg/beer.svg
new file mode 100644
index 0000000..b372bd5
--- /dev/null
+++ b/examples/TransitionItem/images/svg/beer.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13" height="14" viewBox="0 0 13 14">
+<path d="M5 7v-3h-2v2q0 0.414 0.293 0.707t0.707 0.293h1zM13 10.5v1.5h-9v-1.5l1-1.5h-1q-1.242 0-2.121-0.879t-0.879-2.121v-2.5l-0.5-0.5 0.25-1h3.75l0.25-1h7.5l0.25 1.5-0.5 0.25v6.25z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/behance-square.svg b/examples/TransitionItem/images/svg/behance-square.svg
new file mode 100644
index 0000000..4d6e4d5
--- /dev/null
+++ b/examples/TransitionItem/images/svg/behance-square.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="14" viewBox="0 0 12 14">
+<path d="M9.75 1q0.93 0 1.59 0.66t0.66 1.59v7.5q0 0.93-0.66 1.59t-1.59 0.66h-7.5q-0.93 0-1.59-0.66t-0.66-1.59v-7.5q0-0.93 0.66-1.59t1.59-0.66h7.5zM3.898 3.867h-2.898v6.148h2.984q0.914 0 1.539-0.449t0.625-1.332q0-1.234-1.117-1.563 0.836-0.406 0.836-1.281 0-0.445-0.152-0.754t-0.441-0.473-0.617-0.23-0.758-0.066zM3.727 6.352h-1.375v-1.438h1.273q0.93 0 0.93 0.703 0 0.734-0.828 0.734zM3.797 8.969h-1.445v-1.695h1.477q0.969 0 0.969 0.883 0 0.813-1 0.813zM8.875 9.219q-0.531 0-0.813-0.297t-0.281-0.836h3.211q0.008-0.078 0.008-0.234 0-1.031-0.582-1.723t-1.59-0.691q-1 0-1.641 0.672t-0.641 1.688q0 1.055 0.617 1.695t1.664 0.641q1.602 0 2.086-1.492h-1.078q-0.086 0.266-0.371 0.422t-0.59 0.156zM8.797 6.359q0.883 0 0.969 0.953h-1.984q0.031-0.438 0.305-0.695t0.711-0.258zM7.531 4.281h2.492v0.602h-2.492v-0.602z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/behance.svg b/examples/TransitionItem/images/svg/behance.svg
new file mode 100644
index 0000000..b2ef162
--- /dev/null
+++ b/examples/TransitionItem/images/svg/behance.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="14" viewBox="0 0 16 14">
+<path d="M14.438 2.648h-3.992v0.969h3.992v-0.969zM12.469 5.977q-0.703 0-1.141 0.41t-0.484 1.113h3.188q-0.141-1.523-1.563-1.523zM12.594 10.547q0.492 0 0.953-0.25t0.594-0.68h1.727q-0.781 2.398-3.336 2.398-1.672 0-2.66-1.031t-0.988-2.711q0-1.625 1.020-2.699t2.629-1.074q1.078 0 1.879 0.531t1.195 1.398 0.395 1.937q0 0.133-0.016 0.367h-5.141q0 0.867 0.449 1.34t1.301 0.473zM2.164 10.156h2.313q1.602 0 1.602-1.305 0-1.406-1.555-1.406h-2.359v2.711zM2.164 5.961h2.195q0.609 0 0.965-0.285t0.355-0.887q0-1.125-1.484-1.125h-2.031v2.297zM0 1.984h4.641q0.68 0 1.211 0.109t0.988 0.371 0.703 0.754 0.246 1.203q0 1.414-1.344 2.055 0.891 0.25 1.344 0.898t0.453 1.594q0 0.586-0.191 1.066t-0.516 0.809-0.77 0.555-0.945 0.328-1.047 0.102h-4.773v-9.844z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/bell-o.svg b/examples/TransitionItem/images/svg/bell-o.svg
new file mode 100644
index 0000000..6c91ad2
--- /dev/null
+++ b/examples/TransitionItem/images/svg/bell-o.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14">
+<path d="M7.125 13.25q0-0.125-0.125-0.125-0.461 0-0.793-0.332t-0.332-0.793q0-0.125-0.125-0.125t-0.125 0.125q0 0.57 0.402 0.973t0.973 0.402q0.125 0 0.125-0.125zM1.922 11h10.156q-2.078-2.344-2.078-6.5 0-0.398-0.187-0.82t-0.539-0.805-0.949-0.629-1.324-0.246-1.324 0.246-0.949 0.629-0.539 0.805-0.187 0.82q0 4.156-2.078 6.5zM13.5 11q0 0.406-0.297 0.703t-0.703 0.297h-3.5q0 0.828-0.586 1.414t-1.414 0.586-1.414-0.586-0.586-1.414h-3.5q-0.406 0-0.703-0.297t-0.297-0.703q0.391-0.328 0.711-0.688t0.664-0.934 0.582-1.238 0.391-1.609 0.152-2.031q0-1.187 0.914-2.207t2.398-1.238q-0.062-0.148-0.062-0.305 0-0.312 0.219-0.531t0.531-0.219 0.531 0.219 0.219 0.531q0 0.156-0.062 0.305 1.484 0.219 2.398 1.238t0.914 2.207q0 1.086 0.152 2.031t0.391 1.609 0.582 1.238 0.664 0.934 0.711 0.688z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/bell-slash-o.svg b/examples/TransitionItem/images/svg/bell-slash-o.svg
new file mode 100644
index 0000000..e37edb7
--- /dev/null
+++ b/examples/TransitionItem/images/svg/bell-slash-o.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="14" viewBox="0 0 16 14">
+<path d="M8.125 13.25q0-0.125-0.125-0.125-0.461 0-0.793-0.332t-0.332-0.793q0-0.125-0.125-0.125t-0.125 0.125q0 0.57 0.402 0.973t0.973 0.402q0.125 0 0.125-0.125zM3.93 9.539l6.852-5.938q-0.328-0.688-1.035-1.145t-1.746-0.457q-0.727 0-1.324 0.246t-0.949 0.629-0.539 0.805-0.187 0.82q0 3-1.070 5.039zM14.5 11q0 0.406-0.297 0.703t-0.703 0.297h-3.5q0 0.828-0.586 1.414t-1.414 0.586-1.41-0.582-0.59-1.41l1.164-1.008h5.914q-1.297-1.461-1.773-3.586l0.867-0.758q0.477 2.781 2.328 4.344zM15.172 0.125l0.656 0.75q0.062 0.078 0.059 0.184t-0.082 0.176l-14.625 12.672q-0.078 0.062-0.184 0.055t-0.168-0.086l-0.656-0.75q-0.062-0.078-0.059-0.184t0.082-0.168l1.453-1.258q-0.148-0.25-0.148-0.516 0.391-0.328 0.711-0.688t0.664-0.934 0.582-1.238 0.391-1.609 0.152-2.031q0-1.187 0.914-2.207t2.398-1.238q-0.062-0.148-0.062-0.305 0-0.312 0.219-0.531t0.531-0.219 0.531 0.219 0.219 0.531q0 0.156-0.062 0.305 0.969 0.141 1.711 0.645t1.156 1.23l3.266-2.836q0.078-0.062 0.184-0.055t0.168 0.086z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/bell-slash.svg b/examples/TransitionItem/images/svg/bell-slash.svg
new file mode 100644
index 0000000..799c4a6
--- /dev/null
+++ b/examples/TransitionItem/images/svg/bell-slash.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="14" viewBox="0 0 16 14">
+<path d="M12.172 6.656q0.477 2.781 2.328 4.344 0 0.406-0.297 0.703t-0.703 0.297h-3.5q0 0.828-0.586 1.414t-1.414 0.586-1.41-0.582-0.59-1.41zM8 13.375q0.125 0 0.125-0.125t-0.125-0.125q-0.461 0-0.793-0.332t-0.332-0.793q0-0.125-0.125-0.125t-0.125 0.125q0 0.57 0.402 0.973t0.973 0.402zM15.828 0.875q0.062 0.078 0.059 0.184t-0.082 0.176l-14.625 12.672q-0.078 0.062-0.184 0.055t-0.168-0.086l-0.656-0.75q-0.062-0.078-0.059-0.184t0.082-0.168l1.453-1.258q-0.148-0.25-0.148-0.516 0.391-0.328 0.711-0.688t0.664-0.934 0.582-1.238 0.391-1.609 0.152-2.031q0-1.187 0.914-2.207t2.398-1.238q-0.062-0.148-0.062-0.305 0-0.312 0.219-0.531t0.531-0.219 0.531 0.219 0.219 0.531q0 0.156-0.062 0.305 0.969 0.141 1.711 0.645t1.156 1.23l3.266-2.836q0.078-0.062 0.184-0.055t0.168 0.086z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/bell.svg b/examples/TransitionItem/images/svg/bell.svg
new file mode 100644
index 0000000..a379078
--- /dev/null
+++ b/examples/TransitionItem/images/svg/bell.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14">
+<path d="M7.125 13.25q0-0.125-0.125-0.125-0.461 0-0.793-0.332t-0.332-0.793q0-0.125-0.125-0.125t-0.125 0.125q0 0.57 0.402 0.973t0.973 0.402q0.125 0 0.125-0.125zM13.5 11q0 0.406-0.297 0.703t-0.703 0.297h-3.5q0 0.828-0.586 1.414t-1.414 0.586-1.414-0.586-0.586-1.414h-3.5q-0.406 0-0.703-0.297t-0.297-0.703q0.391-0.328 0.711-0.688t0.664-0.934 0.582-1.238 0.391-1.609 0.152-2.031q0-1.187 0.914-2.207t2.398-1.238q-0.062-0.148-0.062-0.305 0-0.312 0.219-0.531t0.531-0.219 0.531 0.219 0.219 0.531q0 0.156-0.062 0.305 1.484 0.219 2.398 1.238t0.914 2.207q0 1.086 0.152 2.031t0.391 1.609 0.582 1.238 0.664 0.934 0.711 0.688z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/bicycle.svg b/examples/TransitionItem/images/svg/bicycle.svg
new file mode 100644
index 0000000..da3cd23
--- /dev/null
+++ b/examples/TransitionItem/images/svg/bicycle.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="14" viewBox="0 0 18 14">
+<path d="M5.953 9h-2.453q-0.312 0-0.449-0.273t0.051-0.523l1.469-1.961q-0.508-0.242-1.070-0.242-1.031 0-1.766 0.734t-0.734 1.766 0.734 1.766 1.766 0.734q0.898 0 1.586-0.566t0.867-1.434zM4.5 8h1.453q-0.141-0.664-0.586-1.156zM8.25 8l2.25-3h-3.75l-0.773 1.031q0.82 0.805 0.984 1.969h1.289zM17 8.5q0-1.031-0.734-1.766t-1.766-0.734q-0.469 0-0.945 0.187l1.359 2.031q0.117 0.18 0.078 0.383t-0.211 0.312q-0.117 0.086-0.281 0.086-0.273 0-0.414-0.227l-1.359-2.031q-0.727 0.742-0.727 1.758 0 1.031 0.734 1.766t1.766 0.734 1.766-0.734 0.734-1.766zM18 8.5q0 1.445-1.027 2.473t-2.473 1.027-2.473-1.027-1.027-2.473q0-0.758 0.309-1.434t0.855-1.168l-0.508-0.766-2.758 3.664q-0.141 0.203-0.398 0.203h-1.539q-0.18 1.281-1.164 2.141t-2.297 0.859q-1.445 0-2.473-1.027t-1.027-2.473 1.027-2.473 2.473-1.027q0.891 0 1.68 0.43l1.070-1.43h-1.75q-0.203 0-0.352-0.148t-0.148-0.352 0.148-0.352 0.352-0.148h3v1h3.398l-0.664-1h-1.734q-0.203 0-0.352-0.148t-0.148-0.352 0.148-0.352 0.352-0.148h2q0.258 0 0.414 0.219l2.086 3.125q0.711-0.344 1.5-0.344 1.445 0 2.473 1.027t1.027 2.473z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/binoculars.svg b/examples/TransitionItem/images/svg/binoculars.svg
new file mode 100644
index 0000000..4250099
--- /dev/null
+++ b/examples/TransitionItem/images/svg/binoculars.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14">
+<path d="M5.5 2.5v6q0 0.203-0.148 0.352t-0.352 0.148v4.5q0 0.203-0.148 0.352t-0.352 0.148h-4q-0.203 0-0.352-0.148t-0.148-0.352v-4l1.945-6.82q0.055-0.18 0.242-0.18h3.313zM8 2.5v5.5h-2v-5.5h2zM14 9.5v4q0 0.203-0.148 0.352t-0.352 0.148h-4q-0.203 0-0.352-0.148t-0.148-0.352v-4.5q-0.203 0-0.352-0.148t-0.148-0.352v-6h3.313q0.187 0 0.242 0.18zM5.75 0.25v1.75h-2.75v-1.75q0-0.109 0.070-0.18t0.18-0.070h2.25q0.109 0 0.18 0.070t0.070 0.18zM11 0.25v1.75h-2.75v-1.75q0-0.109 0.070-0.18t0.18-0.070h2.25q0.109 0 0.18 0.070t0.070 0.18z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/birthday-cake.svg b/examples/TransitionItem/images/svg/birthday-cake.svg
new file mode 100644
index 0000000..5aee145
--- /dev/null
+++ b/examples/TransitionItem/images/svg/birthday-cake.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14">
+<path d="M14 11v3h-14v-3q0.352 0 0.664-0.109t0.461-0.215 0.367-0.293q0.234-0.211 0.402-0.297t0.441-0.086 0.434 0.086 0.41 0.297q0.227 0.195 0.367 0.297t0.453 0.211 0.672 0.109q0.352 0 0.664-0.113t0.453-0.211 0.375-0.293q0.164-0.148 0.254-0.211t0.242-0.117 0.34-0.055q0.273 0 0.441 0.086t0.402 0.297q0.219 0.187 0.367 0.293t0.461 0.215 0.664 0.109 0.664-0.109 0.461-0.215 0.367-0.293q0.234-0.211 0.402-0.297t0.441-0.086q0.266 0 0.434 0.086t0.402 0.297q0.219 0.187 0.367 0.293t0.461 0.215 0.664 0.109zM14 8.5v1.5q-0.273 0-0.434-0.086t-0.41-0.297q-0.227-0.195-0.367-0.297t-0.453-0.211-0.664-0.109q-0.359 0-0.672 0.109t-0.453 0.211-0.367 0.297q-0.172 0.148-0.258 0.211t-0.242 0.117-0.344 0.055q-0.273 0-0.441-0.086t-0.402-0.297q-0.227-0.195-0.367-0.297t-0.453-0.211-0.672-0.109q-0.352 0-0.664 0.113t-0.453 0.211-0.375 0.293q-0.164 0.148-0.254 0.211t-0.242 0.117-0.34 0.055q-0.273 0-0.441-0.086t-0.402-0.297q-0.219-0.187-0.367-0.293t-0.461-0.215-0.664-0.109q-0.359 0-0.672 0.109t-0.453 0.211-0.367 0.297q-0.234 0.211-0.402 0.297t-0.441 0.086v-1.5q0-0.625 0.438-1.062t1.062-0.438h0.5v-3.5h2v3.5h2v-3.5h2v3.5h2v-3.5h2v3.5h0.5q0.625 0 1.062 0.438t0.438 1.062zM4 1.75q0 0.602-0.281 0.926t-0.719 0.324q-0.414 0-0.707-0.293t-0.293-0.707q0-0.227 0.074-0.398t0.184-0.266 0.242-0.219 0.242-0.246 0.184-0.348 0.074-0.523q0.297 0 0.648 0.578t0.352 1.172zM8 1.75q0 0.602-0.281 0.926t-0.719 0.324q-0.414 0-0.707-0.293t-0.293-0.707q0-0.227 0.074-0.398t0.184-0.266 0.242-0.219 0.242-0.246 0.184-0.348 0.074-0.523q0.297 0 0.648 0.578t0.352 1.172zM12 1.75q0 0.602-0.281 0.926t-0.719 0.324q-0.414 0-0.707-0.293t-0.293-0.707q0-0.227 0.074-0.398t0.184-0.266 0.242-0.219 0.242-0.246 0.184-0.348 0.074-0.523q0.297 0 0.648 0.578t0.352 1.172z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/bitbucket-square.svg b/examples/TransitionItem/images/svg/bitbucket-square.svg
new file mode 100644
index 0000000..fdaf355
--- /dev/null
+++ b/examples/TransitionItem/images/svg/bitbucket-square.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="14" viewBox="0 0 12 14">
+<path d="M6.625 6.797q0-0.336-0.32-0.516t-0.602-0.008q-0.336 0.156-0.332 0.566t0.34 0.551q0.305 0.18 0.633-0.031t0.281-0.563zM7.25 6.672q0.062 0.516-0.281 0.945t-0.859 0.477-0.93-0.312-0.438-0.883q-0.016-0.383 0.199-0.727t0.566-0.5q0.547-0.242 1.105 0.078t0.637 0.922zM8.594 3.617q-0.156 0.164-0.418 0.266t-0.414 0.125-0.496 0.062q-1.211 0.156-2.531 0-0.344-0.047-0.492-0.074t-0.41-0.125-0.426-0.254q0.102-0.148 0.281-0.242t0.312-0.121 0.367-0.066q1.547-0.273 3.188-0.008 0.258 0.039 0.398 0.066t0.336 0.125 0.305 0.246zM8.922 9.445q0-0.055 0.043-0.207t0.023-0.25-0.137-0.129q-1.258 0.828-2.852 0.828t-2.859-0.828l-0.094 0.047-0.039 0.094q0.203 1.203 0.32 1.641 0.367 0.633 1.594 0.844 1.945 0.359 3.344-0.414 0.266-0.148 0.383-0.402t0.176-0.668 0.098-0.555zM9.937 4.031q0.070-0.414-0.062-0.586-0.336-0.43-1.211-0.688-1.688-0.492-3.805-0.281-1.031 0.094-1.766 0.359-0.297 0.117-0.465 0.195t-0.367 0.266-0.23 0.422q0.062 0.531 0.148 1.078t0.227 1.336 0.187 1.070q0.008 0.039 0.039 0.242t0.055 0.281 0.094 0.211 0.172 0.219q0.82 0.625 2.219 0.781 2.023 0.219 3.438-0.492 0.187-0.102 0.309-0.18t0.242-0.227 0.152-0.312q0.375-2.086 0.625-3.695zM12 3.25v7.5q0 0.93-0.66 1.59t-1.59 0.66h-7.5q-0.93 0-1.59-0.66t-0.66-1.59v-7.5q0-0.93 0.66-1.59t1.59-0.66h7.5q0.93 0 1.59 0.66t0.66 1.59z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/bitbucket.svg b/examples/TransitionItem/images/svg/bitbucket.svg
new file mode 100644
index 0000000..90282c8
--- /dev/null
+++ b/examples/TransitionItem/images/svg/bitbucket.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11" height="14" viewBox="0 0 11 14">
+<path d="M6.367 6.711q0.062 0.492-0.395 0.789t-0.871 0.047q-0.305-0.133-0.418-0.453t-0.004-0.641 0.406-0.453q0.281-0.141 0.566-0.094t0.5 0.277 0.215 0.527zM7.234 6.547q-0.109-0.836-0.883-1.281t-1.539-0.102q-0.492 0.219-0.785 0.691t-0.27 1.012q0.031 0.711 0.605 1.211t1.293 0.438q0.711-0.062 1.187-0.656t0.391-1.313zM9.102 2.313q-0.156-0.211-0.438-0.348t-0.453-0.172-0.555-0.098q-2.273-0.367-4.422 0.016-0.336 0.055-0.516 0.094t-0.43 0.172-0.391 0.336q0.234 0.219 0.594 0.355t0.574 0.172 0.684 0.090q1.781 0.227 3.5 0.008 0.492-0.062 0.699-0.094t0.566-0.168 0.586-0.363zM9.547 10.398q-0.062 0.203-0.121 0.598t-0.109 0.656-0.223 0.547-0.453 0.441q-0.672 0.375-1.48 0.559t-1.578 0.172-1.574-0.145q-0.359-0.062-0.637-0.141t-0.598-0.211-0.57-0.34-0.406-0.48q-0.195-0.75-0.445-2.281l0.047-0.125 0.141-0.070q1.742 1.156 3.957 1.156t3.965-1.156q0.164 0.047 0.187 0.18t-0.039 0.352-0.062 0.289zM10.961 2.891q-0.203 1.305-0.867 5.117-0.039 0.234-0.211 0.438t-0.34 0.312-0.426 0.242q-1.969 0.984-4.766 0.688-1.937-0.211-3.078-1.086-0.117-0.094-0.199-0.207t-0.133-0.273-0.070-0.266-0.047-0.309-0.043-0.273q-0.070-0.391-0.207-1.172t-0.219-1.262-0.184-1.152-0.172-1.234q0.023-0.203 0.137-0.379t0.246-0.293 0.352-0.234 0.359-0.176 0.375-0.145q0.977-0.359 2.445-0.5 2.961-0.289 5.281 0.391 1.211 0.359 1.68 0.953 0.125 0.156 0.129 0.398t-0.043 0.422z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/bitcoin.svg b/examples/TransitionItem/images/svg/bitcoin.svg
new file mode 100644
index 0000000..d66b09a
--- /dev/null
+++ b/examples/TransitionItem/images/svg/bitcoin.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10" height="14" viewBox="0 0 10 14">
+<path d="M9.117 5q0.141 1.422-1.023 2.016 0.914 0.219 1.367 0.805t0.352 1.672q-0.055 0.555-0.254 0.977t-0.504 0.695-0.758 0.457-0.949 0.27-1.137 0.117v1.992h-1.203v-1.961q-0.625 0-0.953-0.008v1.969h-1.203v-1.992q-0.141 0-0.422-0.004t-0.43-0.004h-1.563l0.242-1.43h0.867q0.391 0 0.453-0.398v-3.141h0.125q-0.047-0.008-0.125-0.008v-2.242q-0.102-0.531-0.695-0.531h-0.867v-1.281l1.656 0.008q0.5 0 0.758-0.008v-1.969h1.203v1.93q0.641-0.016 0.953-0.016v-1.914h1.203v1.969q0.617 0.055 1.094 0.176t0.883 0.352 0.645 0.609 0.285 0.895zM7.438 9.258q0-0.281-0.117-0.5t-0.289-0.359-0.449-0.238-0.512-0.145-0.578-0.070-0.539-0.023-0.504 0.008-0.371 0.008v2.641q0.062 0 0.289 0.004t0.375 0.004 0.414-0.012 0.457-0.031 0.445-0.066 0.434-0.109 0.371-0.164 0.309-0.234 0.191-0.312 0.074-0.398zM6.883 5.539q0-0.258-0.098-0.457t-0.238-0.328-0.375-0.219-0.43-0.129-0.48-0.062-0.453-0.020-0.422 0.008-0.309 0.004v2.398q0.039 0 0.27 0.004t0.363 0 0.391-0.016 0.43-0.043 0.402-0.086 0.379-0.145 0.289-0.211 0.211-0.301 0.070-0.398z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/black-tie.svg b/examples/TransitionItem/images/svg/black-tie.svg
new file mode 100644
index 0000000..fcb547a
--- /dev/null
+++ b/examples/TransitionItem/images/svg/black-tie.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="14" viewBox="0 0 12 14">
+<path d="M0 1h12v12h-12v-12zM8.477 9.711l-1.727-4.93 1.727-2.32h-4.953l1.727 2.32-1.727 4.93 2.477 2.375z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/blind.svg b/examples/TransitionItem/images/svg/blind.svg
new file mode 100644
index 0000000..ad54e7f
--- /dev/null
+++ b/examples/TransitionItem/images/svg/blind.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11" height="14" viewBox="0 0 11 14">
+<path d="M2.859 2.43q-0.5 0-0.859-0.355t-0.359-0.863q0-0.5 0.359-0.855t0.859-0.355 0.855 0.355 0.355 0.855q0 0.508-0.355 0.863t-0.855 0.355zM7.164 7.445q0 0.391-0.234 0.527t-0.496 0.051-0.371-0.266l-2.867-3.422q-0.055-0.094-0.109-0.121t-0.086-0.012l-0.023 0.023q-0.055 0.062 0.031 0.164l0.953 1.086 0.008 2.766-1.258 3.57q-0.523 1.5-0.719 1.828-0.125 0.203-0.219 0.25-0.391 0.203-0.805 0.008-0.227-0.102-0.324-0.336t-0.074-0.445q0.016-0.133 1.539-4.828l0.039-3.25-0.664 1.281 0.273 1.734q0.031 0.187-0.008 0.328t-0.109 0.215-0.148 0.125-0.133 0.059l-0.055 0.016q-0.148 0.023-0.27-0.023t-0.187-0.125-0.109-0.172-0.059-0.152-0.016-0.074l-0.359-2.336 1.648-2.977q0.18-0.266 0.883-0.266 0.586 0 0.836 0.312l3.313 4.070q0.055 0.039 0.109 0.133l0.023 0.023-0.008 0.008q0.055 0.102 0.055 0.227zM4.016 8.617q0.336 0.883 0.691 1.758t0.543 1.313l0.187 0.43q0.281 0.727 0.328 0.977 0.086 0.547-0.281 0.758-0.273 0.172-0.516 0.125t-0.398-0.172-0.227-0.273h-0.008q-0.047-0.125-0.062-0.195l-0.969-2.742zM10.453 13.242q0.242 0.383 0.242 0.445 0 0.039-0.023 0.055-0.070 0.039-0.113-0.004t-0.121-0.203-0.125-0.238q-0.891-1.344-3.305-5.164 0.023 0.008 0.055-0.008t0.055-0.031l0.023-0.016q0.086-0.070 0.086-0.133z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/bluetooth-b.svg b/examples/TransitionItem/images/svg/bluetooth-b.svg
new file mode 100644
index 0000000..6831ae5
--- /dev/null
+++ b/examples/TransitionItem/images/svg/bluetooth-b.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="14" viewBox="0 0 8 14">
+<path d="M4.656 11.117l1.352-1.344-1.352-1.344v2.687zM4.656 5.57l1.352-1.344-1.352-1.344v2.687zM4.906 7l2.781 2.781-4.211 4.219v-5.555l-2.32 2.313-0.844-0.844 2.906-2.914-2.906-2.914 0.844-0.844 2.32 2.313v-5.555l4.211 4.219z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/bluetooth.svg b/examples/TransitionItem/images/svg/bluetooth.svg
new file mode 100644
index 0000000..4239f6c
--- /dev/null
+++ b/examples/TransitionItem/images/svg/bluetooth.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="14" viewBox="0 0 12 14">
+<path d="M6.57 8.227l1.156 1.156-1.164 1.164zM6.563 3.453l1.164 1.164-1.156 1.156zM5.547 13.016l3.625-3.625-2.391-2.391 2.391-2.391-3.625-3.625v4.773l-1.992-1.992-0.727 0.727 2.5 2.508-2.5 2.508 0.727 0.727 1.992-1.992v4.773zM11.164 7q0 1.633-0.25 2.855t-0.684 2.008-1.098 1.27-1.418 0.676-1.715 0.191-1.715-0.191-1.418-0.676-1.098-1.27-0.684-2.008-0.25-2.855 0.25-2.855 0.684-2.008 1.098-1.27 1.418-0.676 1.715-0.191 1.715 0.191 1.418 0.676 1.098 1.27 0.684 2.008 0.25 2.855z"></path>
+</svg>
diff --git a/examples/TransitionItem/images/svg/bold.svg b/examples/TransitionItem/images/svg/bold.svg
new file mode 100644
index 0000000..770a49f
--- /dev/null
+++ b/examples/TransitionItem/images/svg/bold.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11" height="14" viewBox="0 0 11 14">
+<path d="M4.336 11.883q0.578 0.25 1.094 0.25 2.937 0 2.937-2.617 0-0.891-0.32-1.406-0.211-0.344-0.48-0.578t-0.527-0.363-0.629-0.195-0.656-0.082-0.738-0.016q-0.57 0-0.789 0.078 0 0.414-0.004 1.242t-0.004 1.234q0 0.062-0.008 0.527t-0.004 0.754 0.035 0.652 0.094 0.52zM4.227 6.055q0.328 0.055 0.852 0.055 0.641 0 1.117-0.102t0.859-0.348 0.582-0.699 0.199-1.109q0-0.547-0.227-0.957t-0.617-0.641-0.844-0.34-0.969-0.109q-0.391 0-1.016 0.102 0 0.391 0.031 1.18t0.031 1.187q0 0.211-0.004 0.625t-0.004 0.617q0 0.359 0.008 0.539zM0 13l0.016-0.734q0.117-0.031 0.664-0.125t0.828-0.211q0.055-0.094 0.098-0.211t0.066-0.262 0.043-0.254 0.023-0.293 0.004-0.266v-0.512q0-7.672-0.172-8.008-0.031-0.062-0.172-0.113t-0.348-0.086-0.387-0.055-0.379-0.035-0.238-0.023l-0.031-0.648q0.766-0.016 2.656-0.090t2.914-0.074q0.18 0 0.535 0.004t0.527 0.004q0.547 0 1.066 0.102t1.004 0.328 0.844 0.555 0.578 0.816 0.219 1.074q0 0.406-0.129 0.746t-0.305 0.563-0.504 0.449-0.57 0.352-0.656 0.312q1.203 0.273 2.004 1.047t0.801 1.937q0 0.781-0.273 1.402t-0.73 1.020-1.078 0.668-1.277 0.379-1.375 0.109q-0.344 0-1.031-0.023t-1.031-0.023q-0.828 0-2.398 0.086t-1.805 0.094z"></path>
+</svg>
diff --git a/examples/imports/TransitionView/DefaultPageEffect.qml b/examples/imports/FlowView/DefaultFlowEffect.qml
index f9dd5ed..d4c075b 100644
--- a/examples/imports/TransitionView/DefaultPageEffect.qml
+++ b/examples/imports/FlowView/DefaultFlowEffect.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2018 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -28,9 +28,14 @@
 ****************************************************************************/
 
 import QtQuick 2.10
-import TransitionItem 1.0
 
-PageEffect {
+FlowEffect {
     //No Effect
     duration: 0
 }
+
+/*##^##
+Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+##^##*/
diff --git a/examples/imports/FlowView/FlowActionArea.qml b/examples/imports/FlowView/FlowActionArea.qml
new file mode 100644
index 0000000..f4c9cc0
--- /dev/null
+++ b/examples/imports/FlowView/FlowActionArea.qml
@@ -0,0 +1,37 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.10
+
+MouseArea {
+    property Connections connections : Connections {
+        id: connections
+    }
+
+}
diff --git a/examples/imports/TransitionView/PageEffect.qml b/examples/imports/FlowView/FlowEffect.qml
index c2cd5d4..b57ced7 100644
--- a/examples/imports/TransitionView/PageEffect.qml
+++ b/examples/imports/FlowView/FlowEffect.qml
@@ -27,7 +27,6 @@
 **
 ****************************************************************************/
 import QtQuick 2.10
-import TransitionItem 1.0
 import QtQuick.Timeline 1.0
 
 QtObject {
@@ -154,3 +153,9 @@ QtObject {
     }
 
 }
+
+/*##^##
+Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+##^##*/
diff --git a/examples/imports/TransitionView/PageFadeEffect.qml b/examples/imports/FlowView/FlowFadeEffect.qml
index 8eb4707..a550c7c 100644
--- a/examples/imports/TransitionView/PageFadeEffect.qml
+++ b/examples/imports/FlowView/FlowFadeEffect.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2018 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -31,7 +31,7 @@ import QtQuick 2.10
 import TransitionItem 1.0
 import QtQuick.Timeline 1.0
 
-PageEffect {
+FlowEffect {
     id: effect
     //Fade Effect
     duration: 250
diff --git a/examples/imports/FlowView/FlowItem.qml b/examples/imports/FlowView/FlowItem.qml
new file mode 100644
index 0000000..a820074
--- /dev/null
+++ b/examples/imports/FlowView/FlowItem.qml
@@ -0,0 +1,35 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+
+import QtQuick 2.12
+
+
+Item {
+}
diff --git a/examples/imports/TransitionView/PagePushRightEffect.qml b/examples/imports/FlowView/FlowPushLeftEffect.qml
index 45e0b14..494dadb 100644
--- a/examples/imports/TransitionView/PagePushRightEffect.qml
+++ b/examples/imports/FlowView/FlowPushLeftEffect.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2018 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -31,7 +31,7 @@ import QtQuick 2.10
 import TransitionItem 1.0
 import QtQuick.Timeline 1.0
 
-PageEffect {
+FlowEffect {
     id: effect
 
     property real scale: 1
@@ -63,7 +63,7 @@ PageEffect {
 
             Keyframe {
                 frame: 1000
-                value: -effect.transitionView.width
+                value: effect.transitionView.width
                 easing: effect.easing
             }
         }
@@ -75,7 +75,7 @@ PageEffect {
 
             Keyframe {
                 frame: 0
-                value: effect.transitionView.width
+                value: -effect.transitionView.width
             }
 
             Keyframe {
diff --git a/examples/imports/TransitionView/PagePushLeftEffect.qml b/examples/imports/FlowView/FlowPushRightEffect.qml
index e2fd55d..b5797e0 100644
--- a/examples/imports/TransitionView/PagePushLeftEffect.qml
+++ b/examples/imports/FlowView/FlowPushRightEffect.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2018 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -31,7 +31,7 @@ import QtQuick 2.10
 import TransitionItem 1.0
 import QtQuick.Timeline 1.0
 
-PageEffect {
+FlowEffect {
     id: effect
 
     property real scale: 1
@@ -63,7 +63,7 @@ PageEffect {
 
             Keyframe {
                 frame: 1000
-                value: effect.transitionView.width
+                value: -effect.transitionView.width
                 easing: effect.easing
             }
         }
@@ -75,7 +75,7 @@ PageEffect {
 
             Keyframe {
                 frame: 0
-                value: -effect.transitionView.width
+                value: effect.transitionView.width
             }
 
             Keyframe {
diff --git a/examples/imports/TransitionView/PagePushUpEffect.qml b/examples/imports/FlowView/FlowPushUpEffect.qml
index 1dfe306..0645072 100644
--- a/examples/imports/TransitionView/PagePushUpEffect.qml
+++ b/examples/imports/FlowView/FlowPushUpEffect.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2018 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -31,7 +31,7 @@ import QtQuick 2.10
 import TransitionItem 1.0
 import QtQuick.Timeline 1.0
 
-PageEffect {
+FlowEffect {
     id: effect
 
     property real scale: 1
diff --git a/examples/imports/TransitionView/PageSlideDownEffect.qml b/examples/imports/FlowView/FlowSlideDownEffect.qml
index 9731b06..88ff610 100644
--- a/examples/imports/TransitionView/PageSlideDownEffect.qml
+++ b/examples/imports/FlowView/FlowSlideDownEffect.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2018 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -28,10 +28,9 @@
 ****************************************************************************/
 
 import QtQuick 2.10
-import TransitionItem 1.0
 import QtQuick.Timeline 1.0
 
-PageEffect {
+FlowEffect {
     id: effect
 
     property real itemHeight: transitionView.height
@@ -83,3 +82,9 @@ PageEffect {
         }
     }
 }
+
+/*##^##
+Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+##^##*/
diff --git a/examples/imports/TransitionView/PageSlideLeftEffect.qml b/examples/imports/FlowView/FlowSlideLeftEffect.qml
index 182cd35..21a3027 100644
--- a/examples/imports/TransitionView/PageSlideLeftEffect.qml
+++ b/examples/imports/FlowView/FlowSlideLeftEffect.qml
@@ -28,10 +28,9 @@
 ****************************************************************************/
 
 import QtQuick 2.10
-import TransitionItem 1.0
 import QtQuick.Timeline 1.0
 
-PageEffect {
+FlowEffect {
     id: effect
 
     duration: 250
@@ -59,3 +58,9 @@ PageEffect {
         }
     }
 }
+
+/*##^##
+Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+##^##*/
diff --git a/examples/imports/TransitionView/PageSlideRightEffect.qml b/examples/imports/FlowView/FlowSlideRightEffect.qml
index 4bdf4ef..12d3262 100644
--- a/examples/imports/TransitionView/PageSlideRightEffect.qml
+++ b/examples/imports/FlowView/FlowSlideRightEffect.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2018 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -28,10 +28,9 @@
 ****************************************************************************/
 
 import QtQuick 2.10
-import TransitionItem 1.0
 import QtQuick.Timeline 1.0
 
-PageEffect {
+FlowEffect {
     id: effect
 
     duration: 250
@@ -59,3 +58,9 @@ PageEffect {
         }
     }
 }
+
+/*##^##
+Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+##^##*/
diff --git a/examples/imports/TransitionView/PageSlideUpEffect.qml b/examples/imports/FlowView/FlowSlideUpEffect.qml
index 3561562..aa06c93 100644
--- a/examples/imports/TransitionView/PageSlideUpEffect.qml
+++ b/examples/imports/FlowView/FlowSlideUpEffect.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2018 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -28,10 +28,9 @@
 ****************************************************************************/
 
 import QtQuick 2.10
-import TransitionItem 1.0
 import QtQuick.Timeline 1.0
 
-PageEffect {
+FlowEffect {
     id: effect
 
     duration: 250
@@ -59,3 +58,9 @@ PageEffect {
         }
     }
 }
+
+/*##^##
+Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+##^##*/
diff --git a/examples/imports/TransitionView/PageTransition.qml b/examples/imports/FlowView/FlowTransition.qml
index f4ec7b5..c386711 100644
--- a/examples/imports/TransitionView/PageTransition.qml
+++ b/examples/imports/FlowView/FlowTransition.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2018 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -28,7 +28,6 @@
 ****************************************************************************/
 
 import QtQuick 2.10
-import TransitionItem 1.0
 
 QtObject {
     id: root
@@ -36,8 +35,10 @@ QtObject {
     signal finished
 
     /* Those should be lists that allow a n*n mappings. */
-    property Item from: null
-    property Item to: null
+    //property Item from: null
+    //property Item to: null
+    property list<Item> from
+    property list<Item> to
     property int duration
 
     property var transitionView: Item {}
@@ -64,17 +65,26 @@ QtObject {
         root.effect.stop()
     }
 
+    function __checkInclude(list, item)
+    {
+        for (var i = 0; i < list.length; ++i) {
+            if (list[i] === item)
+                return true
+        }
+        return false
+    }
+
     function trigger() {
         if (root.from === null)
             return;
         if (root.to === null)
             return;
 
-        if (root.from === transitionView.currentItem)
+        if (__checkInclude(root.from, transitionView.currentItem))
             transitionView.gotoPage(root)
     }
 
-    property PageEffect effect: DefaultPageEffect {
+    property FlowEffect effect: DefaultFlowEffect {
         transitionView: transitionView
 
     }
@@ -89,3 +99,9 @@ QtObject {
     }
 }
 
+
+/*##^##
+Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+##^##*/
diff --git a/examples/imports/TransitionView/TransitionList.qml b/examples/imports/FlowView/FlowTransitionList.qml
index 4e617c7..e2aa4ae 100644
--- a/examples/imports/TransitionView/TransitionList.qml
+++ b/examples/imports/FlowView/FlowTransitionList.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2018 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
diff --git a/examples/imports/TransitionView/TransitionView.qml b/examples/imports/FlowView/FlowView.qml
index 1f4576a..4ff59b6 100644
--- a/examples/imports/TransitionView/TransitionView.qml
+++ b/examples/imports/FlowView/FlowView.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2018 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -28,20 +28,19 @@
 ****************************************************************************/
 
 import QtQuick 2.10
-import TransitionItem 1.0
 
 Item {
     id: root
     width: 200
     height: 200
 
-    property PageTransition defaultTransition
+    property FlowTransition defaultTransition
 
-    property PageTransition currentTransition
+    property FlowTransition currentTransition
 
-    property PageTransition __forceTransition
+    property FlowTransition __forceTransition
 
-    property list<PageTransition> transitions
+    property list<FlowTransition> flowTransitions
 
     property Item interaction: Item {
     }
@@ -114,13 +113,13 @@ Item {
             root.allChildren.push(stack.children[i])
         }
 
-        /* Assign view to all transitions */
+        /* Assign view to all flowTransitions */
         if (defaultTransition) {
             defaultTransition.transitionView = root
         }
 
-        for (i = 0; i < root.transitions.length; ++i) {
-            var t = root.transitions[i]
+        for (i = 0; i < root.flowTransitions.length; ++i) {
+            var t = root.flowTransitions[i]
             t.transitionView = root
         }
 
@@ -128,6 +127,15 @@ Item {
         __isCompleted = true
     }
 
+    function checkInclude(list, item)
+    {
+        for (var i = 0; i < list.length; ++i) {
+            if (list[i] === item)
+                return true
+        }
+        return false
+    }
+
     function scheduleTransition()
     {
         root.progress = 0
@@ -135,9 +143,9 @@ Item {
         var pageTransition = null
 
         /* find correct transition */
-        for (var i = 0; i < root.transitions.length; ++i) {
-            var t = root.transitions[i]
-            if ((t.from === root.currentItem) && (t.to === root.nextItem)) {
+        for (var i = 0; i < root.flowTransitions.length; ++i) {
+            var t = root.flowTransitions[i]
+            if (checkInclude(t.from, root.currentItem) && checkInclude(t.to, root.nextItem)) {
                 pageTransition = t
             }
         }
@@ -200,7 +208,7 @@ Item {
     }
 
     function gotoPage(transition) {
-        var page = transition.page
+        var page = transition.to[0]
         /* There might be another transition that fits. We are forcing this one. */
         __forceTransition = transition
         for (var i = 0; i < root.allChildren.length; ++i) {
@@ -224,3 +232,9 @@ Item {
         parent: root
     }
 }
+
+/*##^##
+Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+##^##*/
diff --git a/examples/imports/TransitionView/SwipeInteraction.qml b/examples/imports/FlowView/SwipeInteraction.qml
index 3516082..b642c29 100644
--- a/examples/imports/TransitionView/SwipeInteraction.qml
+++ b/examples/imports/FlowView/SwipeInteraction.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2018 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
diff --git a/examples/imports/FlowView/qmldir b/examples/imports/FlowView/qmldir
new file mode 100644
index 0000000..9f7eddb
--- /dev/null
+++ b/examples/imports/FlowView/qmldir
@@ -0,0 +1,16 @@
+DefaultFlowEffect 1.0 DefaultFlowEffect.qml
+SwipeInteraction 1.0 SwipeInteraction.qml
+FlowEffect 1.0 FlowEffect.qml
+FlowFadeEffect 1.0 FlowFadeEffect.qml
+FlowPushLeftEffect 1.0 FlowPushLeftEffect.qml
+FlowPushRightEffect 1.0 FlowPushRightEffect.qml
+FlowSlideDownEffect 1.0 FlowSlideDownEffect.qml
+FlowSlideLeftEffect 1.0 FlowSlideLeftEffect.qml
+FlowSlideRightEffect 1.0 FlowSlideRightEffect.qml
+FlowSlideUpEffect 1.0 FlowSlideUpEffect.qml
+FlowTransition 1.0 FlowTransition.qml
+FlowTransitionList 1.0 FlowTransitionList.qml
+FlowView 1.0 FlowView.qml
+FlowPushUpEffect 1.0 FlowPushUpEffect.qml
+FlowItem 1.0 FlowItem.qml
+FlowActionArea 1.0 FlowActionArea.qml
diff --git a/examples/imports/TransitionView/qmldir b/examples/imports/TransitionView/qmldir
deleted file mode 100644
index 11bf275..0000000
--- a/examples/imports/TransitionView/qmldir
+++ /dev/null
@@ -1,15 +0,0 @@
-DefaultPageEffect 1.0 DefaultPageEffect.qml
-SwipeInteraction 1.0 SwipeInteraction.qml
-PageEffect 1.0 PageEffect.qml
-PageFadeEffect 1.0 PageFadeEffect.qml
-PagePushLeftEffect 1.0 PagePushLeftEffect.qml
-PagePushRightEffect 1.0 PagePushRightEffect.qml
-PageSlideDownEffect 1.0 PageSlideDownEffect.qml
-PageSlideLeftEffect 1.0 PageSlideLeftEffect.qml
-PageSlideRightEffect 1.0 PageSlideRightEffect.qml
-PageSlideUpEffect 1.0 PageSlideUpEffect.qml
-PageTransition 1.0 PageTransition.qml
-TransitionList 1.0 TransitionList.qml
-TransitionView 1.0 TransitionView.qml
-PagePushUpEffect 1.0 PagePushUpEffect.qml
-