Как анимировать появление элемента?

Question

[lavezzi1]

Здравствуйте. Как анимировать вставленный в DOM элемент? Пытаюсь сделать по аналогии как тут - https://github.com/twbs/bootstrap/blob/v4-dev/js/s...

Вроде особой магии нет, setTimeout() тоже нет. Но там анимация отрабатывает.

https://jsfiddle.net/p9f7cteL/7/

Answer 1

[Stalker_RED]

Там используется Util.reflow
Вариант с setTimeout 0 нормально работает https://jsfiddle.net/jjr9zpt4/
Но можно и без таймаута https://jsfiddle.net/jjr9zpt4/1/

Comments

[lavezzi1]

Спасибо! А я еще глянул этот метод в util.js но не предал значения. А что element.offsetheight дает? Перерендеринг? И получается что идет такая последовательность:

1. Создаем элемент и вставляет в документ.
2. Принудительно перерисовываем элемент на странице.
3. В следствие перерисовки отрабатывает наша анимация.

Я прав?

[Stalker_RED]

lavezzi1, да, это один из способов заставить браузер сделать reflow (там даже коммент есть)
https://css-tricks.com/what-forces-layout-reflow/

Вот еще пример с рестартом анимации: https://jsfiddle.net/Stalk/z8no232w/
Если убрать строку с reflow текст будет просто меняется, без эффектов.