Vue.js 关闭Vue模态动画

当模态打开时，我正在制作一个带有fadeInUp动画的模态，当模态关闭时，我正在制作一个带有fadeOutDown动画的模态。动画未使用过渡标记；但是，当我删除过渡标记并在v-show之后的第一个div上添加动画fadeInUp时，动画就会工作。这没有多大帮助，因为我不知道在关闭模式时如何使用淡出动画，这就是我尝试使用过渡的原因。我也在使用Nuxt js和tailwind css。我非常感谢你的帮助

<template>
    <div>
        <transition enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutDown">
            <div v-show="showModal">
                <div
                    class="fixed inset-0 z-50 flex items-center justify-center overflow-x-hidden overflow-y-auto outline-none focus:outline-none"
                >
                    <div class="relative w-auto max-w-6xl mx-auto my-6 ">
                        <!--MODAL CONTENT-->
                        <div
                            class="relative flex flex-col w-full max-w-lg p-10 bg-white border-0 border-8 border-blue-200 rounded-sm rounded-lg shadow-md shadow-lg outline-none focus:outline-none"
                        >
                            <m-modal-head :current-form="currentForm"></m-modal-head>

                            <o-sign-up
                                v-if="currentForm === 'Sign Up'"
                                :input-fields="inputFields"
                                :social-login="socialLogin"
                                v-on="$listeners"
                            ></o-sign-up>
                        </div>
                    </div>
                </div>
            </div>
        </transition>

        <div v-show="showModal" class="fixed inset-0 z-40 bg-black opacity-25"></div>
    </div>
</template>

从“vuex”导入{mapState}；
从“~/components/orbiats/forms/SignUp.vue”导入OSignUp；
从“~/components/molecules/ModalHead.vue”导入MModalHead；
导出默认值{
名称：“OModal”，
组成部分：{
奥西格努普，
达尔海德，
},
道具：['inputFields'，'SocialIn']，
数据（）{
返回{
当前表单：“注册”，
};
},
计算：{
…映射状态（'modal'{
showmodel：（state）=>state.showmodel，
}),
},
};

<script>
    import { mapState } from 'vuex';

    import OSignUp from '~/components/organisms/forms/SignUp.vue';

    import MModalHead from '~/components/molecules/ModalHead.vue';

    export default {
        name: 'OModal',
        components: {
            OSignUp,
            MModalHead,
        },
        props: ['inputFields', 'socialLogin'],
        data() {
            return {
                currentForm: 'Sign Up',
            };
        },
        computed: {
            ...mapState('modal', {
                showModal: (state) => state.showModal,
            }),
        },
    };
</script>