JS меняет анимацию перехода стиля элемента DOM не работает [дубликат] ⇐ Javascript

[Anonymous]

Я пытаюсь понять принцип анимации FLIP.
dom.style.width = '40px';
dom.style.transition = 'width 300ms ease';
dom.offsetHeight;
dom.style.width = '80px';
// This code has an animation effect

dom.style.width = '40px';
dom.style.transition = 'width 300ms ease';
requestAnimationFrame(() => {
dom.style.width = '80px';
});
// This code does NOT have an animation effect. Why?

Ниже приведен конкретный код. Вы можете изменить функцию, выполняемую setTimeout, а затем обновить страницу. При запуске run1 будет отображаться анимация, а при запуске run2 — нет.




document

#dom {
list-style: none;
padding: 12px;
margin: 6px 0;
background: #e6f0ff;
border-radius: 6px;
font-size: 16px;
}



dom


const dom = document.getElementById("dom");

const run1 = () => { //Good
dom.style.width = "40px";
dom.style.transition = "width 300ms ease";
dom.offsetHeight;
dom.style.width = "80px";
};

const run2 = () => { //bad
dom.style.width = "40px";
dom.style.transition = "width 300ms ease";
requestAnimationFrame(() => {
dom.style.width = "80px";
});
};

setTimeout(run2, 3000);






Подробнее здесь: https://stackoverflow.com/questions/798 ... oesnt-work