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

Question

[GrigoryMorozov]

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

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

Я чувствую, что иду по неправильному пути. Буду благодарен за подсказки по этому вопросу.

Comments

[Антон Литвиненко]

Учитывать что свойство display не анимируется. Я делаю модалки используя opacity, visibility и z-index

[profesor08]

Антон Литвиненко,

свойство display не анимируется

как и visibility

[szQocks]

Сначала анимируешь исчезновение блока, потом задаешь ему display:none;
Чтоб показать блок, делаешь все наоборот. Задаешь ему display:block, а потом анимируешь его появление.
Тут нет ничего сложного или каких-то скрытых знаний, все просто и в лоб.

Плавный display none?

[Антон Литвиненко]

profesor08,

Answer 1

[profesor08]

Спрячь элемент за экраном. И манипулируй анимированными свойствами с нужными зажержками.

.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;
  }
}

Comments

[GrigoryMorozov]

Спасибо за решение. И всё же хотелось бы понять, в чём проблема с изменением display. Попытался разобраться в реализации модальных окон от Bootstrap, даже покопался в исходниках, но так и не понял, почему у меня ничего не работает, а там всё работает хорошо.

[profesor08]

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