Property animation on state change for implicitly changing property

Janna

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
           else
               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.

Thanks!