CODEWITHSUNDEEP
qtqmlqtquick2
Ralf Van Bogaert
Ralf Van Bogaert

Reputation: 113

QML: unexpected AnchorAnimation behavior

Consider the following QML code:

import QtQuick 2.0
Item{
    id:window
    anchors.fill:parent
    transitions:Transition{AnchorAnimation{duration:500}}
    Rectangle{
        id:topBar
        anchors{left:parent.left;right:parent.right;bottom:parent.top}
        height:100
        color:'red'
        border.width:1
    }
    Rectangle{
        id:bottomBar
        anchors{left:parent.left;right:parent.right;top:parent.bottom}
        height:100
        color:'blue'
        border.width:1
    }
    states:State{
        name:'on'
        AnchorChanges{target:topBar;anchors.top:parent.top;anchors.bottom:undefined}
        AnchorChanges{target:bottomBar;anchors.bottom: parent.bottom;anchors.top:undefined}
    }
    Component.onCompleted:{window.state='on'}
}

It's fairly straightforward: on window creation, the topBar slides into view from the top, and the bottomBar from the bottom.

The topBar does exactly what it's supposed to, but the bottomBar doesn't: the animation happens at the top (overlapping the topBar), and appears at the bottom of the window when the animation is finished.

What's going on?

Upvotes: 0

Views: 180

Answers (1)

Mitch
Mitch

Reputation: 24386

At the time you start the animation, the window's height is 0:

Component.onCompleted: {
    print(window.height)
    window.state='on'
}

You could start the animation when the window's height is larger than zero:

onHeightChanged: if (height > 0) window.state = 'on'

It appears that afterSynchronizing() also works, and feels less hackish:

onAfterSynchronizing: window.state = 'on'

But I'm not sure if it's safe to assume that the window has a height by then.

Upvotes: 2

Related Questions