Animation of y position for a Column centerd in parent

Question

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?

Answer 1

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
    }
}

Answer 2

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!