QML: horizontal flickable visually lingers in StackView - qt

Question

Suppose you have a long horizontal content, so you put it in flickable for your user to swipe through. This might be a picture or a graph or something else. When the content is swiped right so that it's left side is hidden, and you pop the page from stack, a stack animation occurs where all the content is moved right. However, the before hidden part of flickable content then slides to the right also and becomes visible until the animation is over. I want to find a way to prevent this.
Here is the picture of a red rectangle lingering, carefully captured at 25 frames per second:
Here is the minimal example code to illustrate the problem:
import QtQuick 2.9
import QtQuick.Controls 2.2
ApplicationWindow {
id: window
visible: true
width: 640
height: 480
header: ToolBar {
contentHeight: toolButton.implicitHeight
ToolButton {
id: toolButton
text: "<"
onClicked: {
stackView.pop()
}
}
}
StackView {
id: stackView
initialItem: pageZero
anchors.fill: parent
}
Component {
id: pageZero
Column {
Label {
text: "Page zero"
}
Button {
text: "next"
onClicked: { stackView.push(pageOne) }
}
}
}
Component {
id: pageOne
Flickable {
height: 200
width: 200
contentHeight: 200
contentWidth: 300
Rectangle {
height: 200
width: 300
color: "red"
}
}
}
}
The question is, what handlers should i put to hide the flickable before the animation starts?

Answer 1

Alright, i found how, actually this solution wasn't that hard. (= What i need to do is to have my flickable hidden during the transition, and also shown after the transition has ended, so I add the two lines:
Flickable {
height: 200
width: 200
contentHeight: 200
contentWidth: 300
// watch this next line
StackView.onDeactivating: {rect.visible = false}
StackView.onActivating: {rect.visible = true}
Rectangle {
id: rect
height: 200
width: 300
color: "red"
}
}