Help with transitions

RobM

Here I have some code which toggles between two y positions for this Rectangle:

    Rectangle {
        id: theRectangle
        height: 75
        width: 150
        y : open ? 0 : 110
        color: open ? "blue" : "red"
        property bool open: true

        Behavior on y {
            NumberAnimation {
                easing.type: Easing.InOutQuad
                duration: 1000
            }
        }

        MouseArea {
            anchors.fill: parent
            onClicked: theRectangle.open = !theRectangle.open
        }
    }

now what I would like to do is alter it s/t instead of clicking to get the Rectangle to go from y = 110 back too y = 0, it will instead simply do that after a period of time has elapsed where the element hasn't been touched, but I am not sure how to go about doing that. My Timer doesn't seem to be working:

    Item {
        anchors.fill: parent
        
        Timer {
            interval: 5000; running: true; repeat: true
            onTriggered: if(theRectangle.open === true){theRectangle.open == false}
        }

        Rectangle {
            id: theRectangle
            height: 75
            width: 150
            y : open ? 0 : 110
            color: open ? "blue" : "red"
            property bool open: true

            Behavior on y {
                NumberAnimation {
                    easing.type: Easing.InOutQuad
                    duration: 1000
                }
            }

            MouseArea {
                anchors.fill: parent
                onClicked: theRectangle.open = !theRectangle.open
            }
        }
    }

however, even if I can get it to work I need a way to toggle the time to reset if the user clicks the rectangle. Basically, I am attempting to model a menu that automatically hides if the user hasn't interacted with it in a given time duration.

RobM

Alright, it seems to be working like I want it with some small modifications:

    Item {
        anchors.fill: parent
        
        Timer {
            id: timer
            interval: 5000; running: true; repeat: true
            onTriggered:
            {
                if(theRectangle.open === false)
                    theRectangle.open = !theRectangle.open
            }
        }
        
        Rectangle {
            id: theRectangle
            height: 75
            width: 150
            y : open ? 0 : 110
            color: open ? "blue" : "red"
            property bool open: true
            
            Behavior on y {
                NumberAnimation {
                    easing.type: Easing.InOutQuad
                    duration: 1000
                }
            }
            
            MouseArea {
                anchors.fill: parent
                onClicked:
                {
                    if(theRectangle.open === true)
                        theRectangle.open = !theRectangle.open
                    timer.restart()
                }
            }
        }
    }