Vue.js 过渡中的Vue过渡

创建如下代码所示效果的正确且好的方法是什么？有插件吗

我想得到这样的效果：用户打开一个模式窗口。然后整个页面变暗（淡入淡出效果），一段时间后目标窗口在右侧“进入”（平移效果）

我的代码可以工作，但是可以做得更好吗？有这个的插件吗

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

显示模态
闭合模态
模态窗口内容
导出默认值{
数据（）{
返回{
秀:假,，
展示2：错误，
};
},
方法：{
showModal（）{
让自我=这个；
this.show=true；
setTimeout（函数（）{
self.show2=真；
}, 500);
},
closeModal（）{
this.show=false；
this.show2=假；
},
},
};
.淡入激活状态，
.淡入淡出激活状态{
过渡：不透明度0.5s；
}
.淡入，
.淡出{
不透明度：0；
}
.TranslaterRight进入活动状态，
.TranslaterRight保持活动状态{
转换：转换0.3s；
}
.Translater右键输入，
.翻译离开{
转化：translateX（100%）；
}