QML StackView custom transition

Nadarian picture Nadarian · Apr 1, 2014 · Viewed 8.2k times · Source

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

Scott picture Scott · Apr 3, 2014

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.