Add example for transition item

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

25 files changed, 1721 insertions, 0 deletions

diff --git a/examples/TransitionItem/DefaultPageEffect.qml b/examples/TransitionItem/DefaultPageEffect.qml
new file mode 100644
index 0000000..f9dd5ed
--- /dev/null
+++ b/examples/TransitionItem/DefaultPageEffect.qml
@@ -0,0 +1,36 @@
+/****************************************************************************
+**
+** 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 QtQuick 2.10
+import TransitionItem 1.0
+
+PageEffect {
+    //No Effect
+    duration: 0
+}
diff --git a/examples/TransitionItem/MyMenu.ui.qml b/examples/TransitionItem/MyMenu.ui.qml
new file mode 100644
index 0000000..f7e4026
--- /dev/null
+++ b/examples/TransitionItem/MyMenu.ui.qml
@@ -0,0 +1,332 @@
+/****************************************************************************
+**
+** 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 QtQuick 2.10
+import TransitionItem 1.0
+import QtQuick.Controls 2.3
+import QtQuick.Timeline 1.0
+
+Item {
+    id: menu
+    width: 480
+    height: 249
+
+    state: "Closed"
+
+    Rectangle {
+        id: content
+        color: "#727272"
+        opacity: 0
+        anchors.top: parent.top
+        anchors.topMargin: 50
+        clip: true
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+
+        Slider {
+            x: 258
+            y: 146
+            value: 0.5
+        }
+
+        Switch {
+            x: 22
+            y: 30
+            text: qsTr("WLAN")
+            checked: true
+        }
+
+        Label {
+            x: 173
+            y: 154
+            text: qsTr("Brightness")
+        }
+
+        Slider {
+            x: 258
+            y: 92
+            value: 0.5
+        }
+
+        Label {
+            x: 173
+            y: 100
+            text: qsTr("Volume")
+        }
+
+        SpinBox {
+            x: 264
+            y: 48
+            value: 18
+        }
+
+        SpinBox {
+            x: 364
+            y: 48
+            value: 45
+        }
+
+        Label {
+            x: 173
+            y: 53
+            text: qsTr("Time")
+        }
+    }
+
+    Rectangle {
+        id: rectangle1
+        x: 0
+        y: 0
+        width: 480
+        height: 59
+        color: "#ffffff"
+
+        Column {
+            id: column
+            x: 442
+            y: 21
+            rotation: 90
+            spacing: 6
+
+            Rectangle {
+                width: 20
+                height: 2
+                color: "#292929"
+            }
+
+            Rectangle {
+                width: 20
+                height: 2
+                color: "#292929"
+            }
+
+            Rectangle {
+                width: 20
+                height: 2
+                color: "#292929"
+            }
+        }
+
+        Rectangle {
+            id: shadow
+            y: 58
+            height: 1
+            color: "#565656"
+            anchors.bottom: parent.bottom
+            anchors.left: parent.left
+            anchors.leftMargin: -1
+            anchors.right: parent.right
+        }
+    }
+
+    Timeline {
+        id: timeline
+        animations: [
+            TimelineAnimation {
+                id: opening
+                onFinished: menu.state = "Open"
+                from: 0
+                running: false
+                duration: 350
+                to: 1000
+                loops: 1
+            },
+            TimelineAnimation {
+                id: closing
+                onFinished: menu.state = "Closed"
+                from: 1000
+                running: false
+                duration: 200
+                to: 0
+                loops: 1
+            }
+        ]
+        enabled: true
+        endFrame: 1000
+        startFrame: 0
+
+        KeyframeGroup {
+            target: content
+            property: "opacity"
+            Keyframe {
+                value: 0
+                frame: 0
+            }
+
+            Keyframe {
+                easing.bezierCurve: [0.25, 0.46, 0.45, 0.94, 1, 1]
+                value: 1
+                frame: 1000
+            }
+
+            Keyframe {
+                value: 0
+                frame: 240
+            }
+        }
+
+        KeyframeGroup {
+            target: content
+            property: "anchors.bottomMargin"
+            Keyframe {
+                value: 190
+                frame: 0
+            }
+
+            Keyframe {
+                easing.bezierCurve: [0.25, 0.46, 0.45, 0.94, 1, 1]
+                value: 0
+                frame: 1000
+            }
+        }
+
+        KeyframeGroup {
+            target: content
+            property: "height"
+            Keyframe {
+                value: 10
+                frame: 0
+            }
+        }
+
+        KeyframeGroup {
+            target: column
+            property: "rotation"
+            Keyframe {
+                value: 0
+                frame: 0
+            }
+
+            Keyframe {
+                easing.bezierCurve: [0.77, 0, 0.175, 1, 1, 1]
+                value: 90
+                frame: 1000
+            }
+
+            Keyframe {
+                value: 0
+                frame: 400
+            }
+        }
+    }
+
+    MouseArea {
+        id: open
+        x: 420
+        y: 0
+        width: 60
+        height: 59
+        visible: false
+    }
+
+    MouseArea {
+        id: close
+        x: 420
+        y: 0
+        width: 60
+        height: 59
+        visible: false
+    }
+
+    Connections {
+        target: open
+        onClicked: {
+            menu.state = "Opening"
+        }
+    }
+
+    Connections {
+        target: close
+        onClicked: {
+            menu.state = "Closing"
+        }
+    }
+    states: [
+        State {
+            name: "Closed"
+
+            PropertyChanges {
+                target: timeline
+                currentFrame: 0
+                enabled: true
+            }
+
+            PropertyChanges {
+                target: open
+                visible: true
+            }
+        },
+        State {
+            name: "Opening"
+
+            PropertyChanges {
+                target: timeline
+                enabled: true
+            }
+
+            PropertyChanges {
+                target: opening
+                running: true
+            }
+        },
+        State {
+            name: "Closing"
+
+            PropertyChanges {
+                target: timeline
+                enabled: true
+            }
+
+            PropertyChanges {
+                target: closing
+                running: true
+            }
+        },
+        State {
+            name: "Open"
+
+            PropertyChanges {
+                target: timeline
+                currentFrame: 1000
+                enabled: true
+            }
+
+            PropertyChanges {
+                target: close
+                visible: true
+            }
+        }
+    ]
+}
+
+/*##^## Designer {
+    D{i:0;height:249;width:480}D{i:7;anchors_height:200;anchors_width:200;anchors_x:-1;anchors_y:58;timeline_expanded:true}
+}
+ ##^##*/
diff --git a/examples/TransitionItem/PageEffect.qml b/examples/TransitionItem/PageEffect.qml
new file mode 100644
index 0000000..dd67301
--- /dev/null
+++ b/examples/TransitionItem/PageEffect.qml
@@ -0,0 +1,85 @@
+/****************************************************************************
+**
+** 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 QtQuick 2.10
+import TransitionItem 1.0
+
+QtObject {
+    id: root
+    signal finished
+    signal started
+    function start() {
+        if (root.duration === 0) {
+            root.transitionView.__setupCurrentItem()
+            return
+        }
+
+        /* We set the parents to the content items to apply effects */
+        from.parent = transitionView.__fromContentItem
+        to.parent = transitionView.__toContentItem
+
+        root.started()
+        anim.start()
+    }
+
+     function stop() {
+         anim.complete()
+     }
+
+    property Item from
+    property Item to
+
+    property Item transitionView
+
+    property alias duration: anim.duration
+    property alias easing: anim.easing
+
+    property PropertyAnimation __anim: PropertyAnimation {
+        id: anim
+        duration: 250
+        loops: 1
+        onStopped: {
+            /* reset all typical properties */
+            transitionView.__fromContentItem.opacity = 1
+            transitionView.__fromContentItem.x = 0
+            transitionView.__fromContentItem.y = 0
+            transitionView.__fromContentItem.z = 0
+            transitionView.__fromContentItem.scale = 1
+
+            transitionView.__toContentItem.opacity = 1
+            transitionView.__toContentItem.x = 0
+            transitionView.__toContentItem.y = 0
+            transitionView.__toContentItem.z = 0
+            transitionView.__toContentItem.scale = 1
+
+            root.finished()
+            root.transitionView.__setupCurrentItem()
+        }
+    }
+
+}
diff --git a/examples/TransitionItem/PageFadeEffect.qml b/examples/TransitionItem/PageFadeEffect.qml
new file mode 100644
index 0000000..55ad981
--- /dev/null
+++ b/examples/TransitionItem/PageFadeEffect.qml
@@ -0,0 +1,69 @@
+/****************************************************************************
+**
+** 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 QtQuick 2.10
+import TransitionItem 1.0
+
+PageEffect {
+    id: effect
+    //Fade Effect
+    duration: 250
+    onStarted: {
+        anim01.target = transitionView.__fromContentItem
+        anim02.target = transitionView.__toContentItem
+        anim.start()
+    }
+
+    property ParallelAnimation __FadeAnim: ParallelAnimation {
+        id: anim
+
+        loops: 1
+        PropertyAnimation {
+            id: anim01
+            duration: effect.duration
+            property: "opacity"
+            from: 1
+            to: 0
+            easing: effect.easing
+        }
+
+        PropertyAnimation {
+            id: anim02
+            duration: effect.duration
+            property: "opacity"
+            from: 0
+            to: 1
+            easing: effect.easing
+        }
+    }
+
+    onFinished: {
+
+    }
+}
diff --git a/examples/TransitionItem/PagePushLeftEffect.qml b/examples/TransitionItem/PagePushLeftEffect.qml
new file mode 100644
index 0000000..df5a57a
--- /dev/null
+++ b/examples/TransitionItem/PagePushLeftEffect.qml
@@ -0,0 +1,66 @@
+/****************************************************************************
+**
+** 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 QtQuick 2.10
+import TransitionItem 1.0
+
+PageEffect {
+    id: effect
+
+    duration: 250
+    onStarted: {
+        anim01.target = transitionView.__fromContentItem
+        anim02.target = transitionView.__toContentItem
+        anim.start()
+    }
+
+    property ParallelAnimation __FadeAnim: ParallelAnimation {
+        id: anim
+
+        loops: 1
+
+        PropertyAnimation {
+            id: anim01
+            duration: effect.duration
+            property: "x"
+            from: 0
+            to: effect.transitionView.width
+            easing: effect.easing
+        }
+
+        PropertyAnimation {
+            id: anim02
+            duration: effect.duration
+            property: "x"
+            from: -effect.transitionView.width
+            to: 0
+            easing: effect.easing
+        }
+    }
+}
diff --git a/examples/TransitionItem/PagePushRightEffect.qml b/examples/TransitionItem/PagePushRightEffect.qml
new file mode 100644
index 0000000..0eefa9b
--- /dev/null
+++ b/examples/TransitionItem/PagePushRightEffect.qml
@@ -0,0 +1,66 @@
+/****************************************************************************
+**
+** 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 QtQuick 2.10
+import TransitionItem 1.0
+
+PageEffect {
+    id: effect
+
+    duration: 250
+    onStarted: {
+        anim01.target = transitionView.__fromContentItem
+        anim02.target = transitionView.__toContentItem
+        anim.start()
+    }
+
+    property ParallelAnimation __FadeAnim: ParallelAnimation {
+        id: anim
+
+        loops: 1
+
+        PropertyAnimation {
+            id: anim01
+            duration: effect.duration
+            property: "x"
+            from: 0
+            to: -effect.transitionView.width
+            easing: effect.easing
+        }
+
+        PropertyAnimation {
+            id: anim02
+            duration: effect.duration
+            property: "x"
+            from: effect.transitionView.width
+            to: 0
+            easing: effect.easing
+        }
+    }
+}
diff --git a/examples/TransitionItem/PageSlideDownEffect.qml b/examples/TransitionItem/PageSlideDownEffect.qml
new file mode 100644
index 0000000..058fc41
--- /dev/null
+++ b/examples/TransitionItem/PageSlideDownEffect.qml
@@ -0,0 +1,57 @@
+/****************************************************************************
+**
+** 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 QtQuick 2.10
+import TransitionItem 1.0
+
+PageEffect {
+    id: effect
+
+    duration: 250
+    onStarted: {
+        anim02.target = transitionView.__fromContentItem
+        anim02.target.z = 1
+        anim.start()
+    }
+
+    property ParallelAnimation __FadeAnim: ParallelAnimation {
+        id: anim
+
+        loops: 1
+
+        PropertyAnimation {
+            id: anim02
+            duration: effect.duration
+            property: "y"
+            from: 0
+            to: transitionView.height
+            easing: effect.easing
+        }
+    }
+}
diff --git a/examples/TransitionItem/PageSlideLeftEffect.qml b/examples/TransitionItem/PageSlideLeftEffect.qml
new file mode 100644
index 0000000..c9d9165
--- /dev/null
+++ b/examples/TransitionItem/PageSlideLeftEffect.qml
@@ -0,0 +1,56 @@
+/****************************************************************************
+**
+** 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 QtQuick 2.10
+import TransitionItem 1.0
+
+PageEffect {
+    id: effect
+
+    duration: 250
+    onStarted: {
+        anim02.target = transitionView.__toContentItem
+        anim.start()
+    }
+
+    property ParallelAnimation __FadeAnim: ParallelAnimation {
+        id: anim
+
+        loops: 1
+
+        PropertyAnimation {
+            id: anim02
+            duration: effect.duration
+            property: "x"
+            from: -transitionView.width
+            to: 0
+            easing: effect.easing
+        }
+    }
+}
diff --git a/examples/TransitionItem/PageSlideRightEffect.qml b/examples/TransitionItem/PageSlideRightEffect.qml
new file mode 100644
index 0000000..d0782f6
--- /dev/null
+++ b/examples/TransitionItem/PageSlideRightEffect.qml
@@ -0,0 +1,56 @@
+/****************************************************************************
+**
+** 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 QtQuick 2.10
+import TransitionItem 1.0
+
+PageEffect {
+    id: effect
+
+    duration: 250
+    onStarted: {
+        anim02.target = transitionView.__toContentItem
+        anim.start()
+    }
+
+    property ParallelAnimation __FadeAnim: ParallelAnimation {
+        id: anim
+
+        loops: 1
+
+        PropertyAnimation {
+            id: anim02
+            duration: effect.duration
+            property: "x"
+            from: transitionView.width
+            to: 0
+            easing: effect.easing
+        }
+    }
+}
diff --git a/examples/TransitionItem/PageSlideUpEffect.qml b/examples/TransitionItem/PageSlideUpEffect.qml
new file mode 100644
index 0000000..f83a773
--- /dev/null
+++ b/examples/TransitionItem/PageSlideUpEffect.qml
@@ -0,0 +1,56 @@
+/****************************************************************************
+**
+** 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 QtQuick 2.10
+import TransitionItem 1.0
+
+PageEffect {
+    id: effect
+
+    duration: 250
+    onStarted: {
+        anim02.target = transitionView.__toContentItem
+        anim.start()
+    }
+
+    property ParallelAnimation __FadeAnim: ParallelAnimation {
+        id: anim
+
+        loops: 1
+
+        PropertyAnimation {
+            id: anim02
+            duration: effect.duration
+            property: "y"
+            from: transitionView.height
+            to: 0
+            easing: effect.easing
+        }
+    }
+}
diff --git a/examples/TransitionItem/PageTransition.qml b/examples/TransitionItem/PageTransition.qml
new file mode 100644
index 0000000..fa32169
--- /dev/null
+++ b/examples/TransitionItem/PageTransition.qml
@@ -0,0 +1,81 @@
+/****************************************************************************
+**
+** 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 QtQuick 2.10
+import TransitionItem 1.0
+
+QtObject {
+    id: root
+
+    signal finished
+
+    /* Those should be lists that allow a n*n mappings. */
+    property Item from: null
+    property Item to: null
+    property int duration
+
+    property var transitionView: Item {}
+
+    function __start(current, next) {
+        root.effect.from = current
+        root.effect.to = next
+        root.effect.transitionView = root.transitionView
+
+        root.effect.start()
+    }
+
+    function __stop(current, next) {
+        root.effect.stop()
+    }
+
+    function trigger() {
+        if (root.from === null)
+            return;
+        if (root.to === null)
+            return;
+
+        if (root.from === transitionView.currentItem)
+            transitionView.gotoPage(root)
+    }
+
+    property PageEffect effect: DefaultPageEffect {
+        transitionView: transitionView
+
+    }
+
+    onEffectChanged: {
+        root.effect.transitionView = root.transitionView
+    }
+
+    property Connections effectConnection: Connections {
+        target: root.effect
+        onFinished: root.finished
+    }
+}
+
diff --git a/examples/TransitionItem/Screen01.ui.qml b/examples/TransitionItem/Screen01.ui.qml
new file mode 100644
index 0000000..fe41254
--- /dev/null
+++ b/examples/TransitionItem/Screen01.ui.qml
@@ -0,0 +1,210 @@
+/****************************************************************************
+**
+** 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 QtQuick 2.10
+import TransitionItem 1.0
+import QtQuick.Controls 2.3
+import QtQuick.Timeline 1.0
+
+Rectangle {
+    id: rectangle
+    width: Constants.width
+    height: Constants.height
+
+    color: Constants.backgroundColor
+
+    TransitionView {
+        id: view
+        x: 3
+        y: -4
+        width: 1277
+        height: 727
+        currentIndex: slider.value
+        Image {
+            id: page01
+            source: "images/shuttle1.jpg"
+        }
+
+        Image {
+            id: page02
+            source: "images/shuttle2.jpg"
+        }
+
+        Image {
+            id: page03
+            source: "images/shuttle3.jpg"
+        }
+
+        Image {
+            id: page04
+            source: "images/shuttle4.jpg"
+        }
+
+        Image {
+            id: page05
+            source: "images/shuttle5.jpg"
+        }
+
+        Image {
+            id: page06
+            source: "images/shuttle6.jpg"
+
+            Button {
+                id: button
+                text: qsTr("Back")
+            }
+        }
+
+        defaultTransition: PageTransition {
+        }
+
+        transitions: [
+            PageTransition {
+                from: page01
+                to: page02
+
+                effect: PageSlideRightEffect {
+                }
+            },
+
+            PageTransition {
+                from: page02
+                to: page03
+
+                effect: PageSlideRightEffect {
+                    duration: 500
+                }
+            },
+            PageTransition {
+                from: page03
+                to: page04
+
+                effect: PagePushRightEffect {
+                }
+            },
+            PageTransition {
+                from: page04
+                to: page05
+
+                effect: PagePushRightEffect {
+                    duration: 500
+                }
+            },
+
+            PageTransition {
+                from: page05
+                to: page06
+
+                effect: PageSlideUpEffect {
+                    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 {
+                from: page06
+                to: page05
+
+                effect: PageSlideDownEffect {
+                    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 {
+                from: page04
+                to: page03
+
+                effect: PagePushLeftEffect {
+                }
+            },
+            PageTransition {
+                from: page05
+                to: page04
+
+                effect: PagePushLeftEffect {
+                    duration: 500
+                }
+            },
+
+            PageTransition {
+                from: page02
+                to: page01
+
+                effect: PageSlideLeftEffect {
+                }
+            },
+
+            PageTransition {
+                from: page03
+                to: page02
+
+                effect: PageSlideLeftEffect {
+                    duration: 500
+                }
+            },
+
+            PageTransition {
+                id: transitionToStart
+                from: page06
+                to: page01
+                effect: PageFadeEffect {
+                }
+            }
+        ]
+    }
+
+    Slider {
+        id: slider
+        x: 30
+        y: 23
+        to: 5
+        stepSize: 1
+        value: 0
+    }
+
+    Connections {
+        target: button
+        onClicked: {
+            transitionToStart.trigger()
+            slider.value = 0
+
+            /* TODO bindings should be preserved when calling trigger */
+            view.currentIndex = Qt.binding(function () {
+                return slider.value
+            })
+        }
+    }
+
+    Label {
+        id: label
+        x: 331
+        y: 24
+        color: "#ffffff"
+        text: view.currentIndex
+        font.pointSize: 24
+    }
+}
diff --git a/examples/TransitionItem/Screen02.ui.qml b/examples/TransitionItem/Screen02.ui.qml
new file mode 100644
index 0000000..c3188b9
--- /dev/null
+++ b/examples/TransitionItem/Screen02.ui.qml
@@ -0,0 +1,272 @@
+/****************************************************************************
+**
+** 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 QtQuick 2.10
+import TransitionItem 1.0
+import QtQuick.Controls 2.3
+
+Rectangle {
+    id: rectangle
+    x: 2
+    width: Constants.width
+    height: Constants.height
+    color: "#0b0b0b"
+
+    state: "Screen01"
+
+    TransitionView {
+        id: transitionView
+        x: 111
+        y: 52
+        width: 480
+        height: 640
+        clip: true
+
+        defaultTransition: PageTransition {
+        }
+
+        transitions: [
+            PageTransition {
+                from: page01
+                to: page02
+                effect: PageSlideUpEffect {
+                }
+            },
+            PageTransition {
+                from: page02
+                to: page01
+                effect: PageSlideDownEffect {
+                }
+            },
+
+            PageTransition {
+                from: page02
+                to: page03
+                effect: PagePushRightEffect {
+                }
+            },
+
+            PageTransition {
+                from: page03
+                to: page01
+                effect: PageFadeEffect {
+                }
+            }
+        ]
+
+        Rectangle {
+            id: page01
+            width: 480
+            height: 640
+            color: "#646464"
+
+            Rectangle {
+                id: rectangle2
+                x: 58
+                y: 417
+                width: 364
+                height: 107
+                color: "#ffffff"
+                radius: 4
+
+                TextField {
+                    id: textField
+                    x: 114
+                    y: 57
+                    width: 136
+                    height: 32
+                    horizontalAlignment: Text.AlignHCenter
+                    placeholderText: "Password"
+                }
+
+                TextField {
+                    id: textField1
+                    x: 114
+                    y: 19
+                    width: 136
+                    height: 32
+                    text: "email"
+                    horizontalAlignment: Text.AlignHCenter
+                    placeholderText: "Login"
+                }
+            }
+
+            Label {
+                id: label
+                x: 196
+                y: 257
+                color: "#a0a0a0"
+                text: qsTr("Login")
+                font.bold: true
+                font.pointSize: 24
+            }
+
+            Button {
+                id: next
+                x: 375
+                y: 540
+                text: qsTr("Next")
+            }
+        }
+
+        Rectangle {
+            id: page02
+            width: 480
+            height: 640
+            color: "#646464"
+            Rectangle {
+                id: rectangle3
+                x: 58
+                y: 417
+                width: 364
+                height: 107
+                color: "#ffffff"
+                radius: 4
+            }
+
+            Label {
+                id: label1
+                x: 140
+                y: 240
+                color: "#a0a0a0"
+                text: qsTr("Accept Terms")
+                font.pointSize: 24
+                font.bold: true
+            }
+
+            Button {
+                id: back
+                x: 58
+                y: 545
+                text: qsTr("Login")
+            }
+
+            Button {
+                id: accept
+                x: 188
+                y: 455
+                text: qsTr("Accept Terms")
+            }
+        }
+
+        Rectangle {
+            id: page03
+            width: 480
+            height: 640
+            color: "#646464"
+            Rectangle {
+                id: rectangle4
+                x: 58
+                y: 417
+                width: 364
+                height: 107
+                color: "#ffffff"
+                radius: 4
+
+                Label {
+                    id: label3
+                    x: 149
+                    y: 44
+                    text: qsTr("Thank You")
+                }
+            }
+
+            Label {
+                id: label2
+                x: 162
+                y: 244
+                color: "#a0a0a0"
+                text: qsTr("Thank You")
+                font.pointSize: 24
+                font.bold: true
+            }
+
+            Button {
+                id: abort
+                x: 58
+                y: 545
+                text: qsTr("Abort")
+            }
+        }
+    }
+    MyMenu {
+        id: menu
+        x: 111
+        y: 52
+    }
+
+    Connections {
+        target: next
+        onClicked: {
+            rectangle.state = "Screen02"
+        }
+    }
+
+    Connections {
+        target: back
+        onClicked: {
+            rectangle.state = "Screen01"
+        }
+    }
+
+    Connections {
+        target: accept
+        onClicked: {
+            rectangle.state = "Screen03"
+        }
+    }
+
+    Connections {
+        target: abort
+        onClicked: {
+            rectangle.state = "Screen01"
+        }
+    }
+    states: [
+        State {
+            name: "Screen01"
+        },
+        State {
+            name: "Screen02"
+
+            PropertyChanges {
+                target: transitionView
+                currentIndex: 1
+            }
+        },
+        State {
+            name: "Screen03"
+
+            PropertyChanges {
+                target: transitionView
+                currentIndex: 2
+            }
+        }
+    ]
+}
diff --git a/examples/TransitionItem/TransitionItem.qml b/examples/TransitionItem/TransitionItem.qml
new file mode 100644
index 0000000..ed641a6
--- /dev/null
+++ b/examples/TransitionItem/TransitionItem.qml
@@ -0,0 +1,39 @@
+/****************************************************************************
+**
+** 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 QtQuick 2.10
+import TransitionItem 1.0
+
+Item {
+    width: Constants.width
+    height: Constants.height
+
+    Screen01 {
+    }
+}
diff --git a/examples/TransitionItem/TransitionItem.qmlproject b/examples/TransitionItem/TransitionItem.qmlproject
new file mode 100644
index 0000000..b7fd774
--- /dev/null
+++ b/examples/TransitionItem/TransitionItem.qmlproject
@@ -0,0 +1,39 @@
+import QmlProject 1.1
+
+Project {
+    mainFile: "TransitionItem.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+
+    JavaScriptFiles {
+        directory: "."
+    }
+
+    ImageFiles {
+        directory: "."
+    }
+
+    Files {
+        filter: "*.conf"
+        files: ["qtquickcontrols2.conf"]
+    }
+
+    Files {
+        filter: "qmldir"
+        directory: "."
+    }
+
+    Environment {
+        QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf"
+        QT_AUTO_SCREEN_SCALE_FACTOR: "1"
+    }
+
+    /* List of plugin directories passed to QML runtime */
+    importPaths: [ "imports" ]
+
+    /* Required for deployment */
+    targetDirectory: "/opt/TransitionItem"
+}
diff --git a/examples/TransitionItem/TransitionView.qml b/examples/TransitionItem/TransitionView.qml
new file mode 100644
index 0000000..bdef215
--- /dev/null
+++ b/examples/TransitionItem/TransitionView.qml
@@ -0,0 +1,150 @@
+/****************************************************************************
+**
+** 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 QtQuick 2.10
+import TransitionItem 1.0
+
+Item {
+    id: root
+    width: 200
+    height: 200
+
+    property PageTransition defaultTransition
+
+    property PageTransition currentTransition
+    property PageTransition __forceTransition
+
+    property list<PageTransition> transitions
+
+    enum EffectEnum {
+        Instant,
+        Dissolve,
+        Fade,
+        Pop
+    }
+
+    default property alias item: stack.children
+
+    property Item currentItem
+    property int currentIndex: 0
+
+    property int maxIndex: 0
+
+    Item {
+        id: stack
+        visible: false
+    }
+
+    Component.onCompleted: {
+        root.maxIndex = stack.children.length - 1
+
+        root.allChildren = []
+
+        for (var i = 0; i < stack.children.length; ++i) {
+            root.allChildren.push(stack.children[i])
+        }
+
+        /* Assign view to all transitions */
+        if (defaultTransition) {
+            defaultTransition.transitionView = root
+        }
+
+        for (i = 0; i < root.transitions.length; ++i) {
+            var t = root.transitions[i]
+            t.transitionView = root
+        }
+
+        __setupCurrentItem()
+    }
+
+    onCurrentIndexChanged: {
+        var nextItem = root.allChildren[root.currentIndex]
+
+        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 === nextItem)) {
+                pageTransition = t
+            }
+        }
+
+        if (pageTransition !== null) {
+
+        } else {
+            pageTransition = root.defaultTransition
+        }
+
+        if (root.currentTransition)
+            root.currentTransition.__stop()
+
+        /* If a specific transition is forced then use this one. */
+        if (__forceTransition)
+            pageTransition = __forceTransition
+        __forceTransition = null
+
+        pageTransition.__start(root.currentItem, nextItem)
+    }
+
+    function __setupCurrentItem() {
+        if (root.currentItem)
+            root.currentItem.parent = stack
+
+        root.currentItem = root.allChildren[root.currentIndex]
+
+        root.currentItem.parent = root
+        root.currentTransition = null
+    }
+
+    function gotoPage(transition) {
+        var page = transition.page
+        /* There might be another transition that fits. We are forcing this one. */
+        __forceTransition = transition
+        for (var i = 0; i < root.allChildren.length; ++i) {
+            if (page === root.allChildren[i]) {
+                root.currentIndex = i
+            }
+        }
+    }
+
+    property var allChildren
+
+    property Item __fromContentItem: Item {
+        width: root.width
+        height: root.height
+        parent: root
+    }
+
+    property Item __toContentItem: Item {
+        width: root.width
+        height: root.height
+        parent: root
+    }
+}
diff --git a/examples/TransitionItem/images/shuttle1.jpg b/examples/TransitionItem/images/shuttle1.jpg
new file mode 100644
index 0000000..3ec6cc7
--- /dev/null
+++ b/examples/TransitionItem/images/shuttle1.jpg
diff --git a/examples/TransitionItem/images/shuttle2.jpg b/examples/TransitionItem/images/shuttle2.jpg
new file mode 100644
index 0000000..19a1796
--- /dev/null
+++ b/examples/TransitionItem/images/shuttle2.jpg
diff --git a/examples/TransitionItem/images/shuttle3.jpg b/examples/TransitionItem/images/shuttle3.jpg
new file mode 100644
index 0000000..9d1a8de
--- /dev/null
+++ b/examples/TransitionItem/images/shuttle3.jpg
diff --git a/examples/TransitionItem/images/shuttle4.jpg b/examples/TransitionItem/images/shuttle4.jpg
new file mode 100644
index 0000000..14f88a3
--- /dev/null
+++ b/examples/TransitionItem/images/shuttle4.jpg
diff --git a/examples/TransitionItem/images/shuttle5.jpg b/examples/TransitionItem/images/shuttle5.jpg
new file mode 100644
index 0000000..563d396
--- /dev/null
+++ b/examples/TransitionItem/images/shuttle5.jpg
diff --git a/examples/TransitionItem/images/shuttle6.jpg b/examples/TransitionItem/images/shuttle6.jpg
new file mode 100644
index 0000000..3a283b0
--- /dev/null
+++ b/examples/TransitionItem/images/shuttle6.jpg
diff --git a/examples/TransitionItem/imports/TransitionItem/Constants.qml b/examples/TransitionItem/imports/TransitionItem/Constants.qml
new file mode 100644
index 0000000..ed1c94f
--- /dev/null
+++ b/examples/TransitionItem/imports/TransitionItem/Constants.qml
@@ -0,0 +1,48 @@
+/****************************************************************************
+**
+** 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$
+**
+****************************************************************************/
+
+pragma Singleton
+import QtQuick 2.10
+
+QtObject {
+    readonly property int width: 1280
+    readonly property int height: 720
+    readonly property FontLoader mySystemFont: FontLoader { name: "Arial" }
+    /* Edit this comment to add your custom font */
+    /* readonly property FontLoader myCustomFont: FontLoader { source: "MyCustomFont.ttf" } */
+    readonly property font font: Qt.font({
+                                             family: mySystemFont.name,
+                                             pointSize: Qt.application.font.pixelSize
+                                         })
+    readonly property font largeFont: Qt.font({
+                                                  family: mySystemFont.name,
+                                                  pointSize: Qt.application.font.pixelSize * 1.6
+                                              })
+    readonly property color backgroundColor: "#c2c2c2"
+}
diff --git a/examples/TransitionItem/imports/TransitionItem/qmldir b/examples/TransitionItem/imports/TransitionItem/qmldir
new file mode 100644
index 0000000..616ac20
--- /dev/null
+++ b/examples/TransitionItem/imports/TransitionItem/qmldir
@@ -0,0 +1 @@
+singleton Constants 1.0 Constants.qml
diff --git a/examples/TransitionItem/qtquickcontrols2.conf b/examples/TransitionItem/qtquickcontrols2.conf
new file mode 100644
index 0000000..8c6dd80
--- /dev/null
+++ b/examples/TransitionItem/qtquickcontrols2.conf
@@ -0,0 +1,2 @@
+[Controls]
+Style=Universal