Transition of height doesn't work

tech2nick

Hi guys,
I'm working on small program which uses states and transitions. I create my own button, which has two states (expanded and collapsed). According to states, the button changes its height, color, some image etc. Every change but height works with transition. I mean, every property change animates properly, but changing height in transition isn't smooth, on contrary, height changes instantly (snapping between two states). I could use behaviour on height, but I want to fire the transitions sequentially and because of that I cannot use behaviour. Here's my code:

import QtQuick 2.0



Item {

    id: root
    width: 30
    height: contractedHeight
    property int contractedHeight: 30
    property int expandedHeight: contractedHeight*2
    property color color: "red"

    property string expandedGraphicSource
    property string contractedGraphicSource


    state: "CONTRACTED"
    signal clicked

    Rectangle{
        id: rect
        color: root.color
        width: parent.width
        height: root.contractedHeight

    }

    Image{
        id: img
        source: contractedGraphicSource
        width: parent.width/2
        height: width
        anchors.horizontalCenter: parent.horizontalCenter
        y: (parent.height-height)/2


    }

    MouseArea
    {
        anchors.fill: parent
        onClicked:
        {
            root.clicked()
        }
    }

//    Behavior on height {
//       NumberAnimation { easing.type: Easing.InOutQuad; duration: 200 }
//    }

    states: [
        State{
            name: "EXPANDED"
            PropertyChanges {target: root; height: expandedHeight}
            PropertyChanges {target: rect; height: expandedHeight}
            PropertyChanges {target: rect; color: "white"}
            PropertyChanges {target: img; source: expandedGraphicSource}
            PropertyChanges {target: img; y: parent.height-height}
        },
        State{
            name: "CONTRACTED"
            PropertyChanges {target: root; height: contractedHeight}
            PropertyChanges {target: rect; height: contractedHeight}
            PropertyChanges {target: rect; color: root.color}
            PropertyChanges {target: img; source: contractedGraphicSource}
            PropertyChanges {target: img; y: (parent.height-height)/2}
        }
    ]
    transitions: Transition {
        to: "*"
        SequentialAnimation{
            PropertyAnimation{target: rect; property: height; easing.type: Easing.InOutQuad; duration: 200 }
            ColorAnimation {target: rect; easing.type: Easing.InOutQuad; duration: 200 }
            PauseAnimation {duration: 200}
            PropertyAnimation { target: img; property: "y"; duration: 200 }
        }
    }

}

I tried using PropertyAnimation, NumberAnimation, specyfying target, specyfying property, I tried also detaching rect from root (at the beginning the two were binded), what can be seen in code above. Can anyone help or explain, why transitions work with any property but height?

PS. I found similar problem here: Issue with transitions, but the problem was to use behavior on height, which I cannot do.

Roumed

@tech2nick, your roblem is here.

PropertyAnimation{target: rect; property: height; easing.type: Easing.InOutQuad; duration: 200 }

Property name has to be set as string - with quotes.
Exectly as you do about y.

tech2nick

Silly me, thank you!