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
+    }
+}

CMakeLists.txt

@@ -53,6 +53,7 @@ qt_add_qml_module(evcharger-app
         AboutPage.qml
         AccessPage.qml
         AddDeviceScreen.qml
+        AnimatedStackLayout.qml
         AnimatedStackView.qml
         ApiKeyValueItem.qml
         ApiSettingsPage.qml

MainScreen.qml

@@ -175,7 +175,7 @@ ColumnLayout {
         }
     }
 
-    StackLayout {
+    AnimatedStackLayout {
         id: stackLayout
         Layout.fillWidth: true
         Layout.fillHeight: true

qmldir

@@ -3,6 +3,7 @@ module EVChargerApp
 EVChargerApp 1.0 AboutPage.qml
 EVChargerApp 1.0 AccessPage.qml
 EVChargerApp 1.0 AddDeviceScreen.qml
+EVChargerApp 1.0 AnimatedStackLayout.qml
 EVChargerApp 1.0 AnimatedStackView.qml
 EVChargerApp 1.0 ApiKeyValueItem.qml
 EVChargerApp 1.0 ApiSettingsPage.qml