Блог

У меня есть модал, который представляет собой белый контейнер поверх полупрозрачного темного фона. Когда срабатывает этот модальный режим, я хочу, чтобы фон исчезал, а после этого я хочу, чтобы белый контейнер скользил вверх от нижней части экрана.

Но в то время как затухание работает, скольжение вверх-нет. Что я делаю не так?

Шаблон:

 <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

Чтобы включить переход при начальной визуализации, используйте appear :

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

ДЕМОНСТРАЦИЯ