How to customize animation on show and close?

[Kamichanw]

In qt widget, I can override onShowEvent and onCloseEvent , but in qml, it might be tough. Here is my current solution:

property bool closable: false
Component.onCompleted: {
    showAnim.start()
 }

NumberAnimation {
    id: showAnim
    target: rect
    properties: "opacity,scale"
    from: 0.75
    to: 1
    duration: 40
}

NumberAnimation {
    id: fadeAnim
    target: rect
    properties: "opacity,scale"
    duration: showAnim.duration
    onFinished: {
        closable = true
        close()
    }
    from: showAnim.to
    to: showAnim.from
}
onClosing: event => {
               event.accepted = closable
               if (!closable) {
                   fadeAnim.start()
               }
           }

Is there better way?

[lemons]

@Kamichanw you can customize the enter and exit transitions:

ApplicationWindow {
    width: 640
    height: 640
    visible: true

    Popup {
        id: animatedPopup
        parent: Overlay.overlay ? Overlay.overlay : Window.contentItem
        modal: true
        // using anchors can be tricky with scale animations
        x: (parent.width - width) / 2
        y: (parent.height - height) / 2
        height: 500
        width: 300
        padding: 0

        Text {
            anchors.centerIn: parent
            text: "Click outside to close"
        }

        background: Rectangle {
            anchors.fill: parent
            color: "#468055"
            radius: 15
        }

        enter: Transition {
            ParallelAnimation {
                // animate opacity from 0 to 1 for a more continuous animation
                NumberAnimation {
                    properties: "opacity"
                    from: 0
                    to: 1
                    duration: 64
                }
                NumberAnimation {
                    properties: "scale"
                    from: 0.75
                    to: 1
                    duration: 64
                }
            }
        }
        exit: Transition {
            ParallelAnimation {
                NumberAnimation {
                    properties: "opacity"
                    from: 1
                    to: 0
                    duration: 64
                }
                NumberAnimation {
                    properties: "scale"
                    from: 1
                    to: 0.75
                    duration: 64
                }
            }
        }
    }
    Button {
        anchors.centerIn: parent
        onClicked: animatedPopup.open()
        text: "Open"
    }
}

[Kamichanw]

@lemons However, only Popup has exit and enter.