Vue 转换适用于 "enter" 状态但不适用于 "leave" 状态

Question

我在半透明背景上渲染了一个模式。两个元素都有一个由相同变量控制的 v-if。

虽然 enter 过渡动画工作正常，但 `leave`` 过渡动画被忽略了（它应该平滑淡出，而不是立即消失）。为什么？

标记：

<div id="app">
  <button @click="showModal = !showModal">Toggle Modal</button>
  
  <div v-if="showModal" class="modalBackdrop">
    <transition name="content" appear>
      <div v-if="showModal" class="modalContent">
        Modal
      </div>
    </transition>
  </div>
</div>

CSS:

.content-enter-active {
  animation: slide-up .75s;
}

.content-leave-active {
  animation: fade-out .75s;
}

@keyframes slide-up {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

Answer 1

当showModal为false时，过渡元素立即被销毁。如果您在转换 parent 中使用 v-if="showModal" 的唯一原因是禁用 modalBackdrop，那么您可以动态分配此 class。

这按预期工作：

  <div :class="{ modalBackdrop: showModal }">
    <transition name="content" appear>
      <div v-if="showModal" class="modalContent">
        Modal
      </div>
    </transition>
  </div>

Answer 2

似乎 div 和 modalBackdrop class 在嵌套的 div 和 class modalContent 进行过渡之前消失了，所以尝试用名称为 backdrop 的过渡组件包装模态背景，它也采用 fade-out 动画：

.backdrop-leave-active,.content-leave-active { /*.backdrop-leave-active is sufficient since the parent opacity is applied on children*/
  animation: fade-out .75s;
}

模板：

<div id="app">
  <button @click="showModal = !showModal">Toggle Modal</button>
  <transition name="backdrop" appear>
    <div v-if="showModal" class="modalBackdrop">
      <transition name="content" appear>
        <div v-if="showModal" class="modalContent">
          Modal
        </div>
      </transition>
    </div>
  </transition>
</div>

DEMO

Vue 转换适用于 "enter" 状态但不适用于 "leave" 状态

Vue transition works for "enter" state but not for "leave" state

vue.js

vue-transitions