Why is animation triggered on load - qt

Question

When the window opens you can see the Rectangle sliding out. I set the y property to the parent height so it should be initially outside of the window why is this being animated?
My guess it's because of the parent:height. Maybe because parent.height is not available at loading time and it's initially set to 0?
I have following example to reproduce:
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle {
id: test;
y: parent.height;
states: [
State {
name: "slideOut"
PropertyChanges{
target: test;
y: parent.height;
}
},
State {
name: "slideIn"
PropertyChanges{
target: test;
y: 0;
}
}
]
Behavior on y {
NumberAnimation {
duration: 500;
}
}
color: "red";
width: parent.width;
height: parent.height;
}
MouseArea {
anchors.fill: parent;
onClicked: {
if(test.state == "slideIn") {
test.state = "slideOut";
} else {
test.state = "slideIn";
}
}
}
}

Answer 1

Your guess sounds spot on to me.
You should use transitions with states instead:
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle {
id: test
y: parent.height
width: parent.width
height: parent.height
color: "red"
states: [
State {
name: "slideOut"
PropertyChanges {
target: test
y: parent.height
}
},
State {
name: "slideIn"
PropertyChanges {
target: test
y: 0
}
}
]
transitions: [
Transition {
NumberAnimation {
property: "y"
duration: 500
}
}
]
}
MouseArea {
anchors.fill: parent
onClicked: {
if (test.state == "slideIn") {
test.state = "slideOut"
} else {
test.state = "slideIn"
}
}
}
}
Another solution could be to use the enabled property of Behavior to only run the animation when the window is ready. I'm not sure which property you'd base it on though. Some ideas:
enabled: window.height > 0
enabled: window.active