Реагировать на модальные анимации модальных ключевых кадров

Question

Я использую модал реакции для моделей в моем приложении реакции.Я хотел бы добавить к ним анимацию, когда они появятся.Я использую.ключевые кадры css3 для анимации моих модалов.

@keyframes modalSlide {
  from {
    transform: translateY(-50%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

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

Answer 1

translateY означает перемещение элемента по оси y.Там, где ваш элемент расположен по умолчанию, значение на оси y (как и на двух других осях) равно 0.

Так что если вы хотите переместить свой элемент вверх на yось, вы пишете (-distance).Если вы хотите переместить его вниз, вы пишете (+distance)

И поэтому, если вы хотите, чтобы ваш элемент пришел снизу, вам нужно сначала расположить его ниже позиции по умолчанию.Используя положительное значение.А затем присоедините к нему анимацию.

Таким образом, добавьте transform:translateY(50%) также к самому модалу, чтобы перезаписать его положение по умолчанию.

@keyframes modalSlide {
  from {
    transform: translateY(50%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal {
background:red;
width:10px;
height:100px;
animation:modalSlide 0.5s ease-out forwards;
transform: translateY(50%);
}

<div class="modal">
</div>

Answer 2

Попробуйте положительное значение для translateY в ключевых кадрах from:

@keyframes modalSlide {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }

}