@GrigoryMorozov

Как правильно запускать анимации, если требуется менять свойство display?

При анимации модального окна требуется в дополнение к анимации менять свойство displaynone на block и обратно). Реализовал всё вот таким образом: https://jsfiddle.net/GrigoryMorozov/w1s76Lrv/14/.

Исчезновение всегда происходит плавно, а вот появление — скачками. Если добавить небольшую задержку после изменения свойства display (см. функцию alt-show), всё работает так, как нужно. Вот только если выполняется более сложная анимация, эту задержку приходится существенно увеличивать (вплоть до одной или нескольких секунд).

Я чувствую, что иду по неправильному пути. Буду благодарен за подсказки по этому вопросу.
  • Вопрос задан
  • 95 просмотров
Пригласить эксперта
Ответы на вопрос 1
profesor08
@profesor08 Куратор тега CSS
Спрячь элемент за экраном. И манипулируй анимированными свойствами с нужными зажержками.
.element {
  position: absolute;
  left: 0;
  transition: ease opacity .5s, ease left 0s;
  transition-delay: 0s, 0s;

  &:not(.is-active) {
    left: -99999px;
    opacity: 0;
    transition-delay: 0s, 0.5s;
  }
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы