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

前往悬崖下寻宝
  • 184

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

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

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

回复
阅读 388
1 个回答

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

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

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

宣传栏