Solved Issue with State Transitions
-
In my QML I have the following markup for 2 states & transition that are supposed to expand a rectangle when clicking a toggle button. It only works when expanding the rectangle every time just fine but not when the rectangle goes back to its "original" state (back to textIn), then it just snaps to the values without a transition. What gives?
... property int animTargetY: 0 Rectangle { id: parentContainer width: parent.width height: parent.height color: model.bgColor state: "textIn" /* Animations for ParentContainer */ states: [ State { name: "textOut" PropertyChanges { target: parentContainer y: -animTargetY height: parentContainer.parent.height + animTargetY } }, State { name: "textIn" PropertyChanges { target: parentContainer y: 0 height: parentContainer.parent.height } } ] transitions: [ Transition { from: "textIn" to: "textOut" NumberAnimation { target: parentContainer; properties: "y,height"; easing.type: Easing.OutExpo; duration: 500 } }, Transition { from: "textOut" to: "textIn" NumberAnimation { target: parentContainer; properties: "y,height"; easing.type: Easing.InExpo; duration: 500; } } ] } Rectangle { color: "#FFFFFF" width: 150 height 50 MouseArea { anchors.fill: parent onClicked: { var diff = (textContainer.height - solutionTextRect.height) + 10; animTargetY = diff; parentContainer.state = parentContainer.state == 'textOut' ? 'textIn' : 'textOut'; console.log("Current State: " + parentContainer.state); } } }
[Moved to Qt Quick ~kshegunov]
-
Found out that as soon as I animated the height with Transition it would just snap instantly, dunno why. But I changed the QML to this, using Behaviors instead and now it works:
states: [ State { name: "textOut" PropertyChanges { target: parentContainer y: -animTargetY height: parentContainer.parent.height + animTargetY } } ] Behavior on height { NumberAnimation { easing.type: Easing.InOutQuad; duration: 400 } } Behavior on y { NumberAnimation { easing.type: Easing.InOutQuad; duration: 400 } }