vue.js - Vue 转换适用于“进入”状态，但不适用于“离开”状态

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

似乎带有类的 div 在带有modalBackdrop类的嵌套 div 进行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>

演示

Answer 2

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

这按预期工作：

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