小编Ade*_*ian的帖子

为什么从 JavaScript 更改转换会导致重新计算样式事件，而 CSS 动画不会？

问题/疑问：

CSS 动画能够在不触发Recalculate Style或的情况下平滑地改变元素的变换Update Layer Tree。

为什么我们不能从 JavaScript 中做同样的事情，以便我们可以平滑地更改转换以响应诸如用户移动鼠标之类的事情？

const testElement = document.getElementById('test')

const interval = 2000

startCssAnimation()

function startCssAnimation() {
	testElement.className = 'animate'
  setTimeout(() => {
  	startJsAnimation()
  }, interval)
}

function startJsAnimation() {
	testElement.className = ''
  setTimeout(() => {
  	startCssAnimation()
    jsAnimateGo = false
  }, interval)
  jsAnimateGo = true
  frame = 0
  requestAnimationFrame(jsAnimate)
}

let frame = 0
let jsAnimateGo = false

function jsAnimate() {
	if (jsAnimateGo) {
    testElement.style.transform = `translateX(${frame++}px)` …

Run Code Online (Sandbox Code Playgroud)

javascript blink google-chrome-extension google-chrome-devtools css-animations

Ade*_*ian

2019 09-16

6
推荐指数

0
解决办法

520
查看次数