嵌套的 Vue 过渡：一个过渡有效，另一个无效

Question

我有一个模态框，它是一个位于半透明深色背景之上的白色容器。触发此模式时，我希望背景淡入，然后我希望白色容器从屏幕底部向上滑动。

但是虽然淡入起作用，但向上滑动不起作用。我做错了什么？

模板：

<transition name="modal">
  <div v-if="showModal" class="backdrop">
    <transition name="content">
      <div v-if="showModal" @click="showModal = false" class="container">
        content
      </div>
    </transition>
  </div>
</transition>

CSS动画：

.modal-enter-active {
  animation: fade-in-and-slide-up 1s;
}

.content-enter-active {
  animation: wait-and-fade-in 4s;
}

@keyframes wait-and-fade-in {
  0% {
    opacity: 0;
  }

  66% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

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

  50% {
  }

  100% {
    transform: translateY(0);
  }
}

Codesandbox

Answer 1

要在初始渲染时启用过渡，请使用 appear:

<transition name="modal">
    <div v-if="showModal" class="backdrop">
      <transition name="content" appear>

demo

嵌套的 Vue 过渡：一个过渡有效，另一个无效

Nested Vue transitions: one transition works, the other doesn't

css-animations

vue.js

vue-transitions