过渡动画，高CPU？

Question

当我创建一个简单的codepen来调试我的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>