過渡動畫，高cpu？

Question

當我創建了一個簡單的codepen來調試爲什麼我的反應應用程序中的某個組件使用瞭如此之多的CPU時，我驚訝地發現這是我看到20-30％CPU的Chrome中的這個小CSS過渡。

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 GET硬件加速，其中過渡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>