Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
329 views
in Technique[技术] by (71.8m points)

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

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

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

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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

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

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...