javascript - 如何在调整宽度的同时避免重绘(repaint)dom？

因此，我试图让这两个div互相推动，但是FPS受到了很大的打击，而且我知道这是由于dom重新粉刷而引起的...但是我可以避免吗？

http://codepen.io/Strongarm/pen/obXmmg

document.getElementById("left").addEventListener("click", function(){
   TweenMax.to(".left", 0.5, {width:"100%"});
   TweenMax.to(".right", 0.5, {width:"0%", opacity: 0});
   fullScreen = true;
});

document.getElementById("right").addEventListener("click", function(){
    TweenMax.to(".left", 0.5, {width:"0%", opacity: 0});
    TweenMax.to(".right", 0.5, {width:"100%"});
    fullScreen = true;
});

最佳答案

根据您的情况，您也许可以对“ transform”属性进行动画处理。 This link描述了为什么在移动元素时变换会更好-它也可能有助于调整大小。

出于明显的原因，这并非在所有情况下都有效，但是您可以尝试：

TweenMax.to(".left", 1, {transform: scaleX(100%)});
TweenMax.to(".right", 1, {transform: scaleX(0%)});