QML transition changes immediately, not according to 'duration'

Question

I have the following QML file. I wan't the rectangle myRect to slide in from the right when the root item is clicked (simplified setup). What actually happens is that myRect appears immediately when the root item is clicked.

I checked the running property on the transition and that seems to be fine. It logs true when I click the root item, and then false after 2 seconds.

Does anyone know why the x property doesn't gradually change?

import QtQuick 2.7

Item{
    id: root

    MouseArea{
        anchors.fill: parent
        onClicked: {
            myRect.state = "visible"
        }
    }          

    Rectangle{
        id: myRect

        width: root.width
        height: root.height

        state: "hidden"

        color: "yellow"

        states: [
            State {
                name: "hidden"
                PropertyChanges{
                    target: myRect
                    x: myRect.width
                }
            },
            State {
                name: "visible"
                PropertyChanges{
                    target: myRect
                    x: 0
                }
            }                
        ]
        transitions: [
            Transition {
                NumberAnimation{
                    duration: 2000
                }
                onRunningChanged: {
                    console.log("Running:", running)
                }
            }
        ]
    }
}

Answer 1

You have to indicate the property, in your case "x"

NumberAnimation{
    duration: 2000
    properties: "x"
}