Implement zoom navigation transition animation

AnimatedStackView.qml

@@ -0,0 +1,59 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import EVChargerApp
+
+StackView {
+    popEnter: Transition {
+        PropertyAnimation {
+            property: "opacity"
+            from: 0
+            to: 1
+            duration: 200
+        }
+        ScaleAnimator {
+            from: 2
+            to: 1
+            duration: 200
+        }
+    }
+    popExit: Transition {
+        PropertyAnimation {
+            property: "opacity"
+            from: 1
+            to: 0
+            duration: 200
+        }
+        ScaleAnimator {
+            from: 1
+            to: 0.5
+            duration: 200
+        }
+    }
+    pushEnter: Transition {
+        PropertyAnimation {
+            property: "opacity"
+            from: 0
+            to: 1
+            duration: 200
+        }
+        ScaleAnimator {
+            from: 0.5
+            to: 1
+            duration: 200
+        }
+    }
+    pushExit: Transition {
+        PropertyAnimation {
+            property: "opacity"
+            from: 1
+            to: 0
+            duration: 200
+        }
+        ScaleAnimator {
+            from: 1
+            to: 2
+            duration: 200
+        }
+    }
+}

AppInstance.qml

@@ -12,6 +12,14 @@ Loader {
         return loader.item.backPressed()
     }
 
+    DevicesModel {
+        id: devicesModel
+
+        settings: theSettings
+
+        Component.onCompleted: start()
+    }
+
     Component {
         id: deviceList
 

CMakeLists.txt

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

ChargerTabPage.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import EVChargerApp
 
-StackView {
+AnimatedStackView {
     id: stackView
 
     function backPressed() {

DeviceListScreen.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import EVChargerApp
 
-StackView {
+AnimatedStackView {
     id: stackView
 
     signal deviceSelected(url: string, password: string)
@@ -16,39 +16,6 @@ StackView {
         return false
     }
 
-    // pushEnter: Transition {
-    //     PropertyAnimation {
-    //         property: "opacity"
-    //         from: 0
-    //         to:1
-    //         duration: 200
-    //     }
-    // }
-    // pushExit: Transition {
-    //     PropertyAnimation {
-    //         property: "opacity"
-    //         from: 1
-    //         to:0
-    //         duration: 200
-    //     }
-    // }
-    // popEnter: Transition {
-    //     PropertyAnimation {
-    //         property: "opacity"
-    //         from: 0
-    //         to:1
-    //         duration: 200
-    //     }
-    // }
-    // popExit: Transition {
-    //     PropertyAnimation {
-    //         property: "opacity"
-    //         from: 1
-    //         to:0
-    //         duration: 200
-    //     }
-    // }
-
     initialItem: BaseNavigationPage {
         id: page
         title: qsTr("Device list")
@@ -57,14 +24,6 @@ StackView {
             id: cloudUrlsModel
         }
 
-        DevicesModel {
-            id: devicesModel
-
-            settings: theSettings
-
-            Component.onCompleted: start()
-        }
-
         headerItems: [
             Button {
                 text: qsTr("App Settings")

EcoTabPage.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import EVChargerApp
 
-StackView {
+AnimatedStackView {
     id: stackView
 
     function backPressed() {

SettingsTabPage.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import EVChargerApp
 
-StackView {
+AnimatedStackView {
     id: stackView
 
     function backPressed() {

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 AnimatedStackView.qml
 EVChargerApp 1.0 ApiKeyValueItem.qml
 EVChargerApp 1.0 ApiSettingsPage.qml
 EVChargerApp 1.0 AppInstance.qml