如何在调整宽度的同时避免重新绘制 dom？答案

【问题标题】：How do I avoid repainting the dom whilst adjusting width?如何在调整宽度的同时避免重新绘制 dom？
【发布时间】：2016-03-16 23:31:43
【问题描述】：

所以我试图让这两个 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;
});

【问题讨论】：

我猜问题出在您的 TweenMax 插件本身。如果我猜对了，你的动画很简单，当使用 css 动画甚至 jQuery 的 animate() 实现时，会比河流更流畅。

标签： javascript css performance dom repaint

【解决方案1】：

根据您的情况，您可以改为为“transform”属性设置动画。 This link 描述了为什么在移动元素时使用变换会更好——它可能也有助于调整大小。

由于显而易见的原因，这并不适用于所有情况，但您可以尝试：

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

【讨论】：

我确实尝试过，但是由于 div 会有图像，所以它们会拉伸。