Vue过渡过渡

Question

创建类似以下代码的效果的正确和好的方法是什么？有插件吗？

我想获得这种效果：用户打开一个模式窗口。然后整个页面变暗（淡入淡出效果），过一会儿，目标窗口在右侧“进入”（translateX效果）。

我的代码有效，但是可以做得更好吗？有任何插件吗？

<template>
        <div>
            <button @click="showModal()">Show modal</button>

        <transition name="fade" mode="out-in">
            <div
                v-if="show"
                class="fixed inset-0 flex justify-end w-screen h-screen bg-black bg-opacity-25"
            >
                <transition name="translateRight">
                    <div v-if="show2" class="w-1/5 bg-white">
                        <button @click="closeModal()">Close modal</button>

                        <div>Modal window content</div>
                    </div>
                </transition>
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    data() {
        return {
            show: false,
            show2: false,
        };
    },

    methods: {
        showModal() {
            let self = this;
            this.show = true;

            setTimeout(function () {
                self.show2 = true;
            }, 500);
        },

        closeModal() {
            this.show = false;
            this.show2 = false;
        },
    },
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
    opacity: 0;
}

.translateRight-enter-active,
.translateRight-leave-active {
    transition: transform 0.3s;
}
.translateRight-enter,
.translateRight-leave-to {
    transform: translateX(100%);
}
</style>