在Javascript中回调元素的样式更改

2019年7月20日 166次阅读

很抱歉我对
Javascript的了解不多,但我真的想问一下：

我有一个以下的CSS规则：

.myClass {
    transition: .3s all;
 }

并在< script>中跟随js：

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

// do stuffs for transition end event

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

最佳答案

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事件将触发.

点赞