我的Vue模态组件的过渡不起作用

Question

在组件Modal.vue中，我有我的模板：

<template>
    <transition name="overlay-fade">
      <div class="fixed inset-0 w-full h-screen flex items-center justify-center bg-green-400 z-40 opacity-50">
        <div class="p-8 bg-white w-full max-w-2xl flex-col flex">
          <slot>Modal content</slot>
        </div>
      </div>
    </transition>
</template>

和样式：

<style>
  .overlay-fade-enter-active,
  .overlay-fade-leave-active {
    transition: all 0.8s;
  }
  .overlay-fade-enter,
  .overlay-fade-leave-active {
    opacity: 0;
  }
</style>

我的叠加层没有淡入。转换不起作用？

Answer 1

将appear添加到过渡元素以在初始渲染时触发它。

<transition appear name="overlay-fade">