Solved Help with transitions
-
Here I have some code which toggles between two
y
positions for thisRectangle
: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 fromy = 110
back tooy = 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. MyTimer
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.
-
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() } } } }