过渡动画，高CPU

Question

当我创建一个简单的编码epen来调试为什么我的React应用程序中的一个组件使用如此之多的CPU时，我很惊讶地看到这是Chrome中的这种小CSS过渡20-30％CPU。

http://codepen.io/anon/pen/wjzmxe

有人有想法，我们将如何以不同的方式处理？或为什么这种情况？

<div id='foo'></div>
#foo {
  background: red;
  height: 20px;
  max-width: 500px;
  transition: width linear;
  transition-duration: 10s;
  width: 0;
}
var yes = true
setInterval(function () {
  var size = yes ? '500px' : '0px'
  yes = !yes
  document.getElementById('foo').style.width = size
}, 10*1000)

Answer 1

尝试过渡 transform而不是在 transform上转换硬件加速度，而过渡 width却没有并且性能较低。

setInterval(function () {
  document.getElementById('foo').style.transform = 'scaleX(1)'
}, 10*1000)

#foo {
  background: red;
  height: 20px;
  max-width: 500px;
  transition: transform linear;
  transition-duration: 10s;
  transform: scaleX(0);
  transform-origin: 0;
}

<div id='foo'></div>