动画移除操作是异步的吗？

Question

如下：我把动画移除后立马left设为200，然后再加上动画，但是依然有过渡效果

  ttt.className = ''
  ttt.style.left = '200px'
  ttt.className = 'transition'

https://codepen.io/779102260/...

Answer 1

因为你代码执行是同步的，在代码正在执行的时候，浏览器不会渲染，等你的代码执行完毕，.transition 已经加上了，这个时候才开始渲染，自然有动画。

如果你想没有动画，那就需要给当主线程让出一个空闲，让浏览器先有时间渲染，然后再执行你的代码；比如，你可以通过任务队列(此处为setTimeout)，给浏览器让出一个空闲。

function move() {
  console.log(111)
  ttt.className = ''
  ttt.style.left = '200px'
  setTimeout(()=>{
    ttt.className = 'transition'
  })
}