State change transition happens instantly instead of animating

[tapirath]

import QtQuick 2.12
import QtQuick.Controls 1.4
import CustomQmlTypes 1.0

CustomWindow {
    id: mainWindow
    flags: Qt.ToolTip | Qt.WA_TranslucentBackground | Qt.FramelessWindowHint
    color: "#00000000"

    Loader {
        anchors.fill: parent
        id: login
        source: "Login.qml"
    }

    Loader {
        anchors.fill: parent
        id: dashboard
        source: "Dashboard.qml"
    }

    StateGroup {
        id: screenStates
        state: mainWindow.isLoggedIn() ? "dashScreen" : "loginScreen"
        states: [
            State {
                name: "loginScreen"
                PropertyChanges { target: login; opacity: 1; enabled: true }
                PropertyChanges { target: dashboard; opacity: 0; enabled: false }
            },
            State {
                name: "dashScreen"
                PropertyChanges { target: login; opacity: 0; enabled: false }
                PropertyChanges { target: dashboard; opacity: 1; enabled: true }
            }
        ]
        transitions: [
            Transition {
                from: "loginScreen"
                to: "dashScreen"
                ParallelAnimation {
                    OpacityAnimator { target: login; from: 1; to: 0; duration: 1000 }
                    OpacityAnimator { target: dashboard; from: 0; to: 1; duration: 1000 }
                }
            },
            Transition {
                from: "dashScreen"
                to: "loginScreen"
                ParallelAnimation {
                    OpacityAnimator { target: login; from: 0; to: 1; duration: 1000 }
                    OpacityAnimator { target: dashboard; from: 1; to: 0; duration: 1000 }
                }
            }
        ]
    }
}

I have 2 screens and I'm trying to transition between them. When the state change happens, it's like transitions are ignored completely. In fact when I delete the lines related to transition, nothing changes. State change always happens instantly.

Any ideas?

[Yashpal]

@tapirath Try replacing OpacityAnimator with NumberAnimation or use single transition with reversible set to true

[tapirath]

@Yashpal said in State change transition happens instantly instead of animating:

NumberAnimation

        transitions: [
            Transition {
                reversible: true
                from: "loginScreen"
                to: "dashScreen"
                ParallelAnimation {
                    OpacityAnimator { target: login; from: 1; to: 0; duration: 1000 }
                    OpacityAnimator { target: dashboard; from: 0; to: 1; duration: 1000 }
                }
            }
        ]

I've tried this. it didn't help.

I didn't understand the solution about NumberAnimation. I need the change the opacity of 2 different targets that means I need 2 NumberAnimations no? How is that different?

[Yashpal]

@tapirath Try this, I was talking about changing the code to this.

Transition {
                from: "loginScreen"
                to: "dashScreen"
                reversible: true

                    NumberAnimation { targets: [login, dashboard]; property: "opacity";/* from: 1; to: 0;*/ duration: 1000 }

            }

[tapirath]

That works thanks. Though I found that I was doing something else wrong.
For future reference I'm going to document it here.

I have 2 states "loginScreen" and "dashScreen". I triggered the state change via a button

onClicked: screenStates.state = "dashboard"

As can be seen I've put the wrong state name. What bothers me is that QT doesn't complain about it. It just somehow switches the state to "dashScreen" and doesn't even tell you that you have the wrong state name.