[SOLVED]Animate control's moving caused by other control's invisibility

ixSci

Hi folks!

I'd like to know is there a method to achieve smooth animation with the code below:
@import QtQuick 1.0

Rectangle {
id: container

width: 90
height: 90

Column{
    Rectangle{
        id: redRect

        width: container.width
        height: container.height/3
        color: "red"
        MouseArea{
            anchors.fill: parent
            onClicked: container.state = ""
        }
    }
    Rectangle{
        id: yellowRect

        width: redRect.width
        height: redRect.height
        color: "yellow"
        MouseArea{
            anchors.fill: parent
            onClicked: container.state = "new"
        }
    }
    Rectangle{
        id: greenRect

        width: redRect.width
        height: redRect.height
        color: "green"
    }
}

states: State{
    name: "new"
    PropertyChanges {
        target: yellowRect
        visible: false
    }
}

}@

So, I want that green rect smoothly moves upward\downward. How can I achieve that with the code above?
I know that I can extract all of them from the Column and add custom PropertyChange for the green rect (x,y) position to have the smooth animation but maybe there is a method to do it with the Column element?

Diph

http://developer.qt.nokia.com/doc/qt-4.7/qml-column.html#id-70ca58a7-9c46-4a08-b488-8cba2063e703

@Column{
...
move: Transition {
NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
}
}@

ixSci

Diph, thanks, it is exactly what I need!