Add transitions in stack layout

AnimatedStackLayout.qml

@@ -0,0 +1,52 @@
+import QtQuick
+import QtQuick.Layouts
+
+StackLayout {
+    id: root
+    property int previousIndex: 0
+    property var items: children
+    property Item previousItem: items[previousIndex]
+    property Item currentItem: items[currentIndex]
+
+    Component.onCompleted: {
+        previousIndex = currentIndex
+
+        for(var i = 1; i < count; ++i) {
+            children[i].opacity = 0
+        }
+    }
+
+    Component {
+        id: crossFader
+        ParallelAnimation {
+            property Item fadeOutTarget
+            property Item fadeInTarget
+
+            NumberAnimation {
+                target: fadeOutTarget
+                property: "opacity"
+                to: 0
+                duration: 300
+            }
+
+            NumberAnimation {
+                target: fadeInTarget
+                property: "opacity"
+                to: 1
+                duration: 300
+            }
+        }
+    }
+
+    onCurrentIndexChanged: {
+        items = root.children
+
+        if(previousItem && currentItem && (previousItem != currentItem)) {
+            previousItem.visible = false
+            currentItem.visible = true    
+            var crossFaderAnim = crossFader.createObject(parent, {fadeOutTarget: previousItem, fadeInTarget: currentItem})
+            crossFaderAnim.restart()
+        }
+        previousIndex = currentIndex
+    }
+}