javascript - Javascript中元素样式改变的回调

Question

对不起，我对 Javascript 的了解很少，但我真的很想问这个问题:我有以下 CSS 规则:

.myClass {
    transition: .3s all;
 }

然后在 <script> 中的 js :

[node].style.transform = "translateX(-100px)";
[node].className = "myClass";

// do stuffs for transition end event

我不明白为什么节点向左移动 100px WITH 过渡效果。 Javascript代码不是逐行执行的吗？似乎 setTimout([callback], 10) 确实解决了问题，但究竟是为什么呢？

Answer 1

I don't understand why the node moves towards left for 100px WITH the transition effect. Isn't that true that Javascript code executes line by line?

JavaScript 逐行执行，但浏览器在单独的线程中监视 DOM 的更改并批量更新内容。

transitionend转换完成时将触发事件。