How to close a popup QML after the animation has run?

Question

I have two animations in my popup component, one runs when I open the popup and the other should run when I close it. Both animations work correctly, my current problem is that the animation runs after closing the popup, so it is not visible while the component is open.

Is there any way to close the popup only after running the animation? Or a way to close the popup on click after a certain time?

Here is my popup component with the animations

import QtQuick 2.12
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Popup {
    id: popup
    width: 392
    height: 768
    
    parent: Overlay.overlay
    modal: true
    dim: true
    closePolicy: Popup.NoAutoClose
    
    x: Math.round((parent.width - popup.width))
    y: Math.round((parent.height - popup.height) / 2)
    
    Overlay.modal: Item {
        id: overlay
        width: popup.width
        height: popup.height
        
        Rectangle {
            id: opacityBackground
            anchors.fill: parent
            color: "#000000"
            opacity: 0
            
            PropertyAnimation on opacity {
                to: 0.4; duration: 3000;
            }
        }
    }
    
    background: Rectangle {
        id: backgroundRectangle
        implicitWidth: popup.width
        implicitHeight: popup.height
        color: "#0D0D0D"
    }
    
    Item {
        id: content
        anchors.fill: parent
        
        Item {
            id: header
            width: popup.width - 4
            height: 72
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.topMargin: - 4
            anchors.leftMargin: - 4
            
            Item {
                width: 105
                height: 72
                anchors.left: parent.left
                anchors.top: parent.top
            }
            
            NbIconButton {
                iconSource: "/icons/cancel.svg"
                anchors.top: parent.top
                anchors.right: parent.right
                buttonColor: "#0D0D0D"
                
                onClicked: {
                    slideOut.start()
                    popup.close()
                }
            }
        }
        
        Item {
            id: descriptionContainer
            width: 285
            height: 88
            anchors.top: parent.top
            anchors.topMargin: 118
            anchors.horizontalCenter: parent.horizontalCenter
        }
        
        Item {
            id: tableContainer
            anchors.top: contentTitle.bottom
            anchors.topMargin: 24
        }
    }
    
    onOpened: {
        slideIn.start()
    }
    
    onClosed: {
        slideOut.start()
    }
    
    ParallelAnimation {
        id: slideIn
        
        PropertyAnimation {
            target: overlay
            property: "opacity"
            to: 0
            duration: 3000
        }
        
        NumberAnimation {
            target: popup
            property: "x"
            from: parent.width
            to: 632
            duration: 3000
            easing.type: Easing.OutCubic
        }
    }
    
    ParallelAnimation {
        id: slideOut
        
        PropertyAnimation {
            target: opacityBackground
            property: "opacity"
            to: 0
            duration: 3000
        }
        
        NumberAnimation {
            target: popup
            property: "x"
            from: 632
            to: parent.width
            duration: 3000
            easing.type: Easing.OutCubic
        }
    }
}

Answer 1

I know it's late but a better solution is using properties enter and exit of Popup. I am posting for other people who need it. It would be something like this:

import QtQuick
import QtQuick.Controls.Basic
import QtQuick.Window

Window {
    id: root
    width: 640
    height: 480
    visible: true

    Button {
        onClicked: popup.open()
    }

    Popup {
        id: popup
        width: 200
        height: 400
        anchors.centerIn: Overlay.overlay
        modal: true
        focus: true
        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside

        enter: Transition {
            ParallelAnimation {
                id: popIn
                PropertyAnimation {
                    target: popup
                    property: "scale"
                    from: 0.9
                    to: 1
                    duration: 50
                }
                PropertyAnimation {
                    target: popup
                    property: "opacity"
                    from: 0.9
                    to: 1
                    duration: 50
                }
            }
        }
        exit: Transition {
            ParallelAnimation {
                id: popOut
                PropertyAnimation {
                    target: popup
                    property: "scale"
                    from: 1
                    to: 0.9
                    duration: 50
                }
                PropertyAnimation {
                    target: popup
                    property: "opacity"
                    from: 1
                    to: 0.9
                    duration: 50
                }
            }
        }
    }
}