Animation of y position for a Column centerd in parent

I have a Column with three elements and one element can change its visibility if the user hits the spacebar. To make the visibility change look smoothly I can add a move transition:



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

Column {
spacing: 2

Rectangle { color: "red"; width: 50; height: 50 }
Rectangle { id: greenRect; color: "green"; width: 20; height: 50 }
Rectangle { color: "blue"; width: 50; height: 20 }

move: Transition {
NumberAnimation { properties: "x,y"; duration: 1000 }
}

focus: true
Keys.onSpacePressed: greenRect.visible = !greenRect.visible
}
}


This works. But if I center the Column in its parent the visibility change also results in a new height for the Columnand therefore also to a new y position.



Now I don't want the Column to 'jump' to its new position but also to move smoothly. So I added this to the Column:



    anchors.centerIn: parent
Behavior on y {
NumberAnimation { duration: 1000 }
}


But the y position change is still not animated. How to achieve this?



Answers

I added another Item element which holds the Column. This allows you to set a Behavior on the item's height property and is what you're looking for:



import QtQuick 2.4
import QtQuick.Controls 1.3

ApplicationWindow {
width: 640
height: 480
visible: true

Item {
id: container
width: col.width
height: col.height
anchors.centerIn: parent
property int animationDuration: 200

Behavior on height {
PropertyAnimation {
duration: container.animationDuration
}
}

Column {
id: col
spacing: 2
focus: true

Rectangle { color: "red"; width: 50; height: 50 }
Rectangle { id: greenRect; color: "green"; width: 20; height: 50 }
Rectangle { color: "blue"; width: 50; height: 20 }

move: Transition {
NumberAnimation { properties: "x,y"; duration: container.animationDuration }
}

Keys.onSpacePressed: greenRect.visible = !greenRect.visible
}
}
}


Hope this helps!



Answers

Property changes induced by anchors don't seem to trigger Behaviours.



As a workaround, manually center the Column:



import QtQuick 2.2

Rectangle {
width: 640
height: 480

Column {
spacing: 2
anchors.horizontalCenter: parent.horizontalCenter
y: (parent.height - height) / 2

Behavior on y {
NumberAnimation { duration: 1000 }
}

Rectangle { color: "red"; width: 50; height: 50 }
Rectangle { id: greenRect; color: "green"; width: 20; height: 50 }
Rectangle { color: "blue"; width: 50; height: 20 }

move: Transition {
NumberAnimation { properties: "x,y"; duration: 1000 }
}

focus: true
Keys.onSpacePressed: greenRect.visible = !greenRect.visible
}
}