QML StackView custom transition

Question

I have gone through the Qt docs :Qt StackView yet still I can't figure out what am I doing wrong, because my code should produce fade in/out animation but what I got is just an instant blink between content. I hope my description is sufficient and clear.

StackView {
    id: stackView
    anchors.fill: parent
    delegate: StackViewDelegate {

        function transitionFinished(properties)
        {
            properties.exitItem.opacity = 1
        }

        property Component pushTransition: StackViewTransition {
            PropertyAnimation {
                target: enterItem
                property: "opacity"
                from: 0
                to: 1
                duration: 10
            }
            PropertyAnimation {
                target: exitItem
                property: "opacity"
                from: 1
                to: 0
                duration: 10
            }
        }
    }
    initialItem: Item {
        width: parent.width
        height: parent.height
        ListView {
            model: pageModel
            anchors.fill: parent
            delegate: AndroidDelegate {
                text: title
                onClicked: stackView.push(Qt.resolvedUrl(page))
            }
        }
    }
}

Answer 1

I hit the same problem and asked their support - their example is wrong.

replace

property Component pushTransition: StackViewTransition {

with

pushTransition: StackViewTransition {

and it should work. pushTransition is actually a property on StackViewDelegate

I'm still trying to get the transitionFinished function to work becuase their example of that doesn't work either.

Answer 2

This is working for me:

Window {
    id: mainWindowId
    width: 1280
    height: 800

    StackView {
       id: stackViewId
       anchors.fill: parent

      replaceEnter: Transition {
          PropertyAnimation{
              property: "opacity"
              from: 0
              to: 1
              duration: 300
          }
      }

      replaceExit: Transition {
          PropertyAnimation{
              property: "opacity"
              from: 1
              to: 0
              duration: 250
          }
      }

      initialItem: "yourStartingPage.qml"

    }
}

And for changing views:

stackViewId.replace("yourOtherPage.qml")