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 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!