如何在动画运行后关闭弹出的 QML？

Question

我的弹出组件中有两个动画，一个在打开弹出窗口时运行，另一个在关闭弹出窗口时运行。两个动画都正常工作，我当前的问题是动画在关闭弹出窗口后运行，因此在组件打开时它不可见。

有没有办法只在运行动画后关闭弹出窗口？ 或者在一定时间后关闭点击弹出窗口的方法？

这是我的带有动画的弹出组件

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

我知道已经晚了，但更好的解决方案是使用 Popup 的 enter 和 exit 属性。我发帖是为了其他有需要的人。它会是这样的：

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
                }
            }
        }
    }
}