[QT6] StackView Enter transitions not working with material style

[ndias]

Hi,

I am using QT6 to implement a StackView. I noticed popEnter, pushEnter and replaceEnter transitions are not working correctly when using material style (import QtQuick.Controls.Material).
When no material style is used or when using QT5 no problems are detected. In the same way, no issues are detected if no animation transitions are defined.

Bellow i share a mininal script reproducing the issue.

It looks me likely a regression issue. I think I will open a ticket on the bug report system.

// QT5 ---------------------------------------
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.15
import QtQuick.Controls.Material 2.12

/*
// QT6 ---------------------------------------
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Controls.Material
*/

ApplicationWindow {
    id: root
    width: 500
    height: 500

    header: ToolBar {
        RowLayout {
            id: headerRowLayout
            anchors.fill: parent
            spacing: 0

            ToolButton {
                text: "1"
                enabled: stack.depth >= 1
                onClicked: stack.pop(view1)
            }
            ToolButton {
                text: "2"
                enabled: stack.depth >= 2
                onClicked: stack.pop(view2)
            }
            ToolButton {
                text: "3"
                enabled: stack.depth >= 3
                onClicked: stack.pop(view3)
            }
            ToolButton {
                text: "4"
                enabled: stack.depth >= 4
                onClicked: stack.pop(view4)
            }

            Item {
                Layout.fillWidth: true
            }

            ToolButton {
                text: "Quit App"
                onClicked: Qt.quit()
            }
        }
    }




    StackView {
        id: stack
        initialItem: view1
        anchors.fill: parent


        /*
        popEnter:Transition {
            XAnimator {
                from: -stack.width
                to: 0
                duration: 2000
                easing.type: Easing.OutCubic
            }
        }
        popExit: Transition {
            XAnimator {
                from: 0
                to: stack.width
                duration: 2000
                easing.type: Easing.OutCubic
            }
        }
        */

        popEnter: Transition {
            PropertyAnimation {
                target: stack
                property: "opacity"
                from: 0
                to: 1
                duration: 1500
                easing.type: Easing.InOutElastic;
                easing.amplitude: 2.0;
                easing.period: 1.5
            }
        }
        popExit: Transition {
            PropertyAnimation {
                target: stack
                property: "opacity"
                from: 1
                to: 0
                duration: 500
                easing.type: Easing.InOutElastic;
                easing.amplitude: 2.0;
                easing.period: 1.5
            }
        }
        

        Component {
            id: stackPage
            Rectangle {
                id: stackPageView
                property alias page: pageLabel.text
                anchors.fill: parent

                RoundButton {
                    id: backButton
                    anchors {
                        bottom: parent.bottom;
                        left: parent.left; 
                    }
                    text: "Back"
                    visible: stack.depth > 1
                    onClicked: stack.back()
                }

                Text {
                    id: pageLabel
                    anchors {
                        verticalCenter: backButton.verticalCenter; 
                        horizontalCenter: parent.horizontalCenter; 
                    }
                    text: "-"
                }

                RoundButton {
                    id: nextButton
                    anchors {
                        bottom: parent.bottom;
                        right: parent.right; 
                    }
                    text: "Next"
                    visible: stack.depth < 4
                    onClicked: stack.next()
                }              

            }
        }


        function back() {
            if (stack.depth > 1) {
                stack.pop();
            }
        }
        function next() {
            switch (stack.depth) {
                case 1:
                    stack.push(view2)
                    break
                case 2:
                    stack.push(view3)
                    break
                case 3:
                    stack.push(view4)
                    break
                default:
                    break
            }
        }

        Loader {
            id: view1
            sourceComponent: stackPage
            onLoaded: {item.color = "red"; item.page = "1"}
        }

        Loader {
            id: view2
            sourceComponent: stackPage
            onLoaded: {item.color = "green"; item.page = "2"}
        }

        Loader {
            id: view3
            sourceComponent: stackPage
            onLoaded: {item.color = "blue"; item.page = "3"}
        }

        Loader {
            id: view4
            sourceComponent: stackPage
            onLoaded: {item.color = "white"; item.page = "4"}
        }
    }

}

EDIT (9 JUL 2021):
Issue reported on https://bugreports.qt.io/browse/QTBUG-95097