Animation problems with the property when

Question

why doesn't animation in the left work in the first case?

qmlonline.

if you go to the second case and comment out the code with when, then the animation works. the same problem if you disable sequential animation.

this is the first case without animation

this is the second case with animation

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    id: root

    property int type: 0

    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    MouseArea {
        anchors.horizontalCenter: parent.horizontalCenter
        width: 50
        height: 50
        Rectangle { anchors.fill: parent; color: "blue" }

        onClicked: {
            root.type = !root.type
//            stG.state = root.type ? "right" : "left"  // uncomment to the second case
        }
    }

    Rectangle {
        id: switcher1

        width: 50
        height: 50
        color: "red"
        anchors.verticalCenter: parent.verticalCenter
    }
    Rectangle {
        id: switcher2

        width: 50
        height: 50
        color: "green"
        anchors.top: switcher1.bottom
        anchors.topMargin: 10
    }

    StateGroup {
        id: stG
        states: [
            State {
                name: "left"
                when: type === 0 // comment to the second case
                PropertyChanges {
                    target: switcher1
                    x: 0
                }
                PropertyChanges {
                    target: switcher2
                    x: 0
                }
            },
            State {
                name: "right"
                when: type === 1 // comment to the second case
                PropertyChanges {
                    target: switcher1
                    x: root.width - switcher1.width
                }
                PropertyChanges {
                    target: switcher2
                    x: root.width - switcher2.width
                }
            }
        ]
        transitions: [
            Transition {
                to: "left"
                SequentialAnimation {
                    NumberAnimation {
                        target: switcher2
                        property: "x"
                        duration: 500
                    }
                    NumberAnimation {
                        target: switcher1
                        property: "x"
                        duration: 500
                    }
                }
            },
            Transition {
                to: "right"
                SequentialAnimation {
                    NumberAnimation {
                        target: switcher1
                        property: "x"
                        duration: 500
                    }
                    NumberAnimation {
                        target: switcher2
                        property: "x"
                        duration: 500
                    }
                }
            }
        ]
    }
}

that's enough

Answer 1

I can give you a way to fix the problem, but it actually feels like there might be a bug with Qt here.

I tried adding a printout to show me what state Qt thinks it's in:

        onStateChanged:
        {
            console.log("state: " + stG.state);
        }

The output I got was this:

// First click
> state: right

// Second click
> state:
> state: left

So, what seems to be happening is that for a split second, the state enters some non-existent state and resets your x-values to 0 without using the transitions. Then the correct state gets applied, but we don't see the transition because everything is already at 0. Maybe someone smarter than me can help figure out why we switch to the bad state first.

Thankfully, there is a simple enough fix. If you make the "right" transition reversible, then it works as expected.

            Transition {
                to: "right"
                reversible: true
                ...
            }