Анимация блока сразу же после его добавления?

Question

[artr_lr]

Возможно ли сделать анимацию элемента? По логике элемент получает динамические стили и сразу же добавляется на страницу, где должна срабатывать анимация развёртывания и перемещения. Но... этого не происходит, а блок просто получает динамический стиль конечного состояния без анимации... Но если смотреть через отладчик хромовский, то всё работает как надо!

.el {
    transition: transform .33s ease;
    background: red;
    width: 100px;
    height: 100px;
}

var div = document.createElement('div');
div.className = 'el';
div.style.transform = 'scale(.5) translate3d(100px, 100px, 0)'; // первоначальное состояние
document.body.appendChild(div);
div.style.transform = 'scale(1) translate3d(0px, 0px, 0)'; // конечное

Answer 1

[Stalker_RED]

Оберните последнюю строку в setTimeout(..., 0)
https://jsfiddle.net/6vecsx0h/

Answer 2

[Ridz]

как вариант запросить размер любого элемента на странице, после добавления

var div = document.createElement('div');
div.className = 'el';
div.style.transform = 'scale(.5) translate3d(100px, 100px, 0)'; // первоначальное состояние
document.body.appendChild(div);
document.body.scrollHeight; //хак
div.style.transform = 'scale(1) translate3d(0px, 0px, 0)'; // конечное

Comments

[artr_lr]

Твой вариант даже лучше показывает себя на практике! Спасибо!

Answer 3

[expeerd]

У меня стойкое впечатление, что CSS-анимации намного более изящное решение и правильное решение.