Important: Please read the Qt Code of Conduct -

Property animation on state change for implicitly changing property

  • Hi,
    I would like to animate a property change (rectangle changes height) only when the item transitions from the state #1 to the state#2. However the height of the item is changing not inside of the PropertyChanges but implicitly when the new text string is assigned and it changes the height of the rectangle.
    Consider an example:

     Item {
            id: container
            width: 320
            height: 120
            Rectangle {
                id: rect
                color: "red"
                width: 120
                height: 120
                MouseArea {
                    anchors.fill: parent
                    onClicked: container.state == 'other' ? container.state = '' : container.state = 'other'
            states: [
                // This adds a second state to the container where the rectangle is farther to the right
                State {
                    name: "other"
                    PropertyChanges {
                        target: rect
                        x: 200
                      //  height: 400
            onStateChanged: {
               if(state == "other")
                    rect.height = 400
                   rect.height = 50
            transitions: [
                // This adds a transition that defaults to applying to all state changes
                Transition {
                    // This applies a default NumberAnimation to any changes a state change makes to x or y properties
                    NumberAnimation {target: rect;  properties: "x,y, height" }

    The transition only works on x because it is explicitly changed in PropertyChanges of the "other" State. However if I change height in onStateChanged the transition does not work. In my actual example height is changed automatically/implicitly when I assign a new text string. Text is positioned inside of the rectangle and a longer text will make the rectangle height bigger. I also tried to use Behaviour on height but it triggers the animation every time height property changes. In my cause I only want to trigger it when I switch between State##1 to State#2 ( in this example "other" and default state).

    Please let me know if there is any way I could get this to work.


Log in to reply