Is there anyway to change the replaceEnter/Exit Transition animation dynamically depending on the next QML file to be loaded in the stack view. Situation:
I have a Centre QML file having 4 buttons on the 4 sides of the screen. There are other 4 QML files namely Top, Bottm, Right and Left. On press of top button on the Centre QML the Top qml file should transitioned from top-to-bottom and replace the centre one. Similarly on press of left button on the centre QML the left QML should enter there display area from left to right and replace the centre one.
I tried using replaceEnter/Exit property. But not able to understand how to change it dynamically depending on the next QML to be displayed.
take a look at the doc for infos about customizing transitions for Stackview.
If you need more than one transition you can define them separately and then assign them just before they are used. Here is an example:
StackView {
id: control
pushEnter: topTransition
Transition {
id: topTransition
XAnimator {
from: (control.mirrored ? -1 : 1) * -control.width
to: 0
duration: 400
easing.type: Easing.OutCubic
}
}
Transition {
id: bottomTransition
XAnimator {
from: 0
to: (control.mirrored ? -1 : 1) * control.width
duration: 400
easing.type: Easing.OutCubic
}
}
Button {
text: "Push page from bottom"
onClicked: {
control.pushEnter = bottomTransition
control.push(bottomPage)
}
}
}
You will have to explicitly set all push/pop/replace transitions you need before each button click.