Vuejs css 类离开不适用于嵌套过渡

Question

我正在使用 VueJs 3，我想制作一个带有动画的模态登录表单。 我希望第一个动画是背景不透明度，第二个（但同时）是从顶部转换到中心的表单。 我使用一个过渡组件作为背景，一个嵌套 表单的过渡组件。

这是我的模板代码

<template>
<transition name="popup">
    <div v-if="showLogin" class="absolute top-0 right-0 bottom-0 left-0 bg-black bg-opacity-50 flex flex-row flex-nowrap justify-center items-center select-none" @click="toggleLoginPopup(false)">
        <transition name="popup-inside" appear>
            <div class="shadow-lg bg-white rounded-sm p-4 border border-gray-300" @click.stop="">
                <div class="text-xl pb-4 text-center">
                    Sign In
                </div>
                <label class="block text-lg">
                    Username
                </label>
                <input type="text" class="w-full h-8 p-2 border border-black shadow-inner"/>
                <label class="block text-lg pt-4">
                    Password
                </label>
                <input type="password" class="w-full h-8 p-2 border border-black shadow-inner"/>
                <a class="block hover:cursor-pointer bg-purple-600 hover:bg-purple-800 text-xl w-full text-center rounded-sm text-white p-2 mt-4">
                    Login
                </a>
            </div>
        </transition>
    </div>
</transition>
</template>

这是CSS的代码

<style scoped>
.popup-enter-active, .popup-leave-active, .popup-inside-enter-active, .popup-inside-leave-active {
    transition: all 5s ease;
}

.popup-enter-from, .popup-leave-to {
    opacity: 0;
}

.popup-inside-enter-from, .popup-inside-leave-to {
    transform: translate(0px, -100px);
}
</style>

进入时一切正常，但离开时，类不适用于嵌套过渡。