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

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.