Как дождаться выполнения append и вызвать функцию?

Question

[Илья Кочкин]

добрый день, как вызвать функцию после выполнения "добавления" append, не прибегая к setTimeout.
Смысл такой что у меня создается "налету" элемент div с заданным классом и он скрыт. после того как элемент был добавлен в дом я хочу плавно его ввести через добавление класса. Если я сделаю

$('body').append(data);
$(data).addClass('open');

то элемент у меня сразу появится. если я сделаю через setTimeout

$('body').append(data);
setTimeout(() => {
$(data).addClass('open');
}, 100);

то будет работать как надо - но это ведь костыль

Comments

[Kovalsky]

"Если я сделаю ... то элемент у меня сразу появится" - а разве не это нужно? Если не это, то что тогда нужно?

[Andrew]

я хочу плавно его ввести

Вам css-анимации нужны, а не таймер.

[Илья Кочкин]

Kovalsky, он изначально скрыт через transform: translateY(100%); дальше при добавлении класса open transform: translateY(0%); "выползает снизу" без таймера он сразу "виден"

[Илья Кочкин]

Andrew, а без анимации никак?

[Eduard07]

Илья Кочкин, может попробовать transition-delay: 0.1s например ?

[G F]

Илья Кочкин, просто добавить transition надо и все, будет плавность
transition: transform 0.3s

[Andrew]

Илья Кочкин, Стоит пояснить, постепенное появление(с задержкой),- тоже анимация

Answer 1

[Евгений Кузнецов]

можно так попробовать сделать (через requestAnimationFrame): https://jsfiddle.net/rw6c35ep/
у вас проблема в том, что вставка и добавление класса происходят синхронно и получается сразу конечный результат