How can I animate a Dialog to enter from outside the screen?

Question

This question is similar to - but no the same as Moving qml Item out of left side of window, because my question is about Dialogs, instead of Items in general. The difference is explained below.

I have a Qt Dialog which I want to enter the screen from the left.

The first approach I took was setting the dialogs x property to -width and then adding a Behavior on x or a manually triggered NumberAnimation.

This approach however failed, because setting negative x values is not allowed and the value gets changed to 0 immediately.

This post provides a solution for this issue, by using anchors and AnchorChanges and transitions - but only for Items.

However, the Dialog type does neither provide states, nor anchors but only coordinates.

So my question stands: How can I have a QML Dialog animate from the left outside the screen into view?

Here's a minimal code sample, that demonstrate the x property being reset to 0:

import QtQuick 2.7
import QtQuick.Controls 2.3

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Dialog Demo")

    Dialog {
        id: dialog

        width: 200
        height: 200

        x: -width

        Text {
            anchors.centerIn: parent
            text: "Ok?"
        }

        standardButtons: Dialog.Ok
        onOpened: x = 100

        Behavior on x { NumberAnimation{ duration: 1000 } }
    }

    Component.onCompleted: dialog.open()
}

Answer 1

You can use the enter-transition that is inherited from Popup:

import QtQuick 2.9
import QtQuick.Window 2.0
import QtQuick.Controls 2.3

Window {
    id: window
    visible: true
    width: 600
    height: 600

    Dialog {
        id: dialog
        width: 300
        height: 300

        enter: Transition {
            NumberAnimation { properties: "x,y"; from: -300; to: 150 }
        }
    }

    Button {
        anchors.centerIn: parent
        onClicked: dialog.open()
    }
}

There seems to be a Bug with the Dialog. As soon as the Dialog has some content, it fails. I have not discovered all depths of it, but wrapping everything in an Item seems to help. Compare for this:

import QtQuick 2.9
import QtQuick.Window 2.0
import QtQuick.Controls 2.3

ApplicationWindow {
    id: window
    visible: true
    width: 600
    height: 600

    Dialog {
        id: dialog
        width: 300
        height: 300

        enter: Transition {
            NumberAnimation { properties: "x,y"; from: -300; to: 150; duration: 5000 }
        }

        // HAVE A BUTTON IN THE DIALOG -> POSITIONING FAILS
        Button {
            anchors.centerIn: parent
        }    
    }

    Button {
        text: 'open'
        anchors.centerIn: parent
        onClicked: dialog.open()
    }
}

and

import QtQuick 2.9
import QtQuick.Window 2.0
import QtQuick.Controls 2.3

ApplicationWindow {
    id: window
    visible: true
    width: 600
    height: 600

    Dialog {
        id: dialog
        width: 300
        height: 300

        enter: Transition {
            NumberAnimation { properties: "x,y"; from: -300; to: 150; duration: 5000 }
        }

        Item {  // WRAP IT IN THE ITEM -> WORKS FOR ME
            anchors.fill: parent
            Button {
                anchors.centerIn: parent
            }
        }
    }

    Button {
        text: 'open'
        anchors.centerIn: parent
        onClicked: dialog.open()
    }
}