Qt World Summit: Register Today!

Transition of height doesn't work

  • 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
            id: rect
            color: root.color
            width: parent.width
            height: root.contractedHeight
            id: img
            source: contractedGraphicSource
            width: parent.width/2
            height: width
            anchors.horizontalCenter: parent.horizontalCenter
            y: (parent.height-height)/2
            anchors.fill: parent
    //    Behavior on height {
    //       NumberAnimation { easing.type: Easing.InOutQuad; duration: 200 }
    //    }
        states: [
                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}
                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: "*"
                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.

  • @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.

  • Silly me, thank you!

Log in to reply