QML Keep transition during the x seconds on mousearea Pressed once

Question

I checked the different mouseArea events in the documentation and there is no chance to execute a function while a mouseArea is being pressed once. I want to keep the transition for 5 seconds and after 5 seconds it should out back.

Here is what i'm trying

Rectangle {
    id: bottomBar
    x: 0
    y: 431
    width: 800
    height: 100
    visible: true
    color: "#d0e8f5"
    radius: 32
    border.width: 0
    clip: false

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }

    states: State {
            name: "moved"; when: mouseArea.pressed
            PropertyChanges { target: bottomBar; x: 0; y: 411}
    }

    transitions: Transition {
        NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad; }
    }
}

i want to keep bottomBar on x:0 y:411 for 5 seconds

Thanks to @iam_peter we figured out the solution. I share the solution below. I also added 2 rowlayouts on this bottomBar and wanted to have 4 images with good alignment and i did. Now i want to make this images clickable and bring the ui to another qmls.(i am using stack view for that)

property string initializePage : "MainMenu.qml"
property string lightningPage : "LightningMenu.qml"
property string timerPage : "Timer.qml"

Rectangle {
    id: bottomBar
    x: 0
    y: 431
    width: 800
    height: 100
    visible: true
    color: "#d0e8f5"
    radius: 32
    border.width: 0
    clip: false

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onPressed: SequentialAnimation {
            PropertyAnimation {
                target: bottomBar
                property: "y"
                to: 411
            }

            PropertyAnimation {
                targets: [bottomRowLeft,bottomRowRight]
                property: "opacity"
                to: 1
            }


            PauseAnimation {
                duration: 5000
            }


            PropertyAnimation {
                targets: [bottomRowLeft,bottomRowRight]
                property: "opacity"
                to: 0
            }


            PropertyAnimation {
                target: bottomBar
                property: "y"
                to: 431
            }


        }
    }
}



RowLayout{
    id: bottomRowLeft
    anchors {
        left: bottomBar.left
        bottom: bottomBar.bottom
    }
    anchors.bottomMargin: 45
    anchors.leftMargin: 175
    spacing: 10
    opacity: 0

    //Home Icon
    Image{
        source: "/images/homeButtonIcon.png"
    }
        MouseArea{
            id: homeClicked
            Layout.fillWidth: true
            onClicked: {
                stackViewTool.replace(Qt.resolvedUrl("MainMenu.qml")) // not working
            }

        }

    Image{
        source:"/images/removeButtonIcon.png"
    }
        MouseArea{
            id: removeClicked
            Layout.fillWidth: true
        }
}

RowLayout{
    id: bottomRowRight
    anchors {
        left: bottomRowLeft.right
        bottom: bottomBar.bottom
    }
    anchors.bottomMargin: 45
    anchors.leftMargin: 215
    spacing: 10
    opacity: 0

    //Home Icon
    Image{
        source: "/images/cancelButtonIcon.png"
    }
        MouseArea{
            id: cancelClicked
            Layout.fillWidth: true
        }

    Image{
        source:"/images/applyButtonIcon.png"
    }
        MouseArea{
            id: applyClicked
            Layout.fillWidth: true
            onClicked: {
                stackViewTool.replace(lightningPage)
            }
        }
}


StackView {
    id: stackViewTool
    anchors {
        left: parent.left
        right: parent.right
        top: parent.top
        bottom: bottomBar.top
    }
    initialItem: initializePage

}

Answer 1

You want to trigger an animation on MouseArea press, then the property should change, pause and go back to the previous value?

Rectangle {
    id: bottomBar
    x: 0
    y: 431
    width: 800
    height: 100
    visible: true
    color: "#d0e8f5"
    radius: 32
    border.width: 0
    clip: false

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onPressed: SequentialAnimation {
            PropertyAnimation {
                target: bottomBar
                property: "y"
                to: 411
            }
            PauseAnimation {
                duration: 5000
            }
            PropertyAnimation {
                target: bottomBar
                property: "y"
                to: 431
            }
        }
    }
}