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

Question

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

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

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

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

Answer 1

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

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

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

}

Answer 2

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>