在过渡上使用宽度和变换会导致闪烁答案

【问题标题】：Using width and transform on transition causes flickering在过渡上使用宽度和变换会导致闪烁
【发布时间】：2015-06-09 09:07:43
【问题描述】：

查看这个 JSBIN：http://jsbin.com/hufibisawa/1/edit?css,js,output

启动 Chrome：

点击测试按钮
点击test2按钮
您将看到绿色条闪烁。我想这是因为“translate3d”不会像“width”那样计算它的像素

当同时使用“left”和“width”属性时，它可以完美地工作，但它的性能并不好。原因是 translate3d 触发硬件加速，使用亚像素计算，动画非常流畅。

这是一个错误吗？可以解决吗？使用 Firefox 效果很好！那么可能是 Chrome 错误？

CSS

#test {
  position: absolute;
  transition: transform 1s ease-out, width 1s ease-out;
  left: 0;
  top: 0;
  transform: translate3d(0, 0, 0);
  width: 300px;
  height: 25px;
  background-color: red;
}

#test2 {
  position: absolute;
  transition: transform 1s ease-out, width 1s ease-out;
  left: 0;
  transform: translate3d(0, 25px, 0);
  top: 0;
  width: 300px;
  height: 25px;
  background-color: green;
}

还有 JS

document.querySelector('#button').addEventListener('click', function () {

var el = document.querySelector('#test');
  el.style.width = '150px';
  el.style.transform = 'translate3d(0px, 0px, 0)';

  var el = document.querySelector('#test2');
  el.style.width = '150px';
  el.style.transform = 'translate3d(150px, 0px, 0)';

});

document.querySelector('#button2').addEventListener('click', function () {

var el = document.querySelector('#test');
  el.style.width = '300px';
  el.style.transform = 'translate3d(0px, 0px, 0)';

  var el = document.querySelector('#test2');
  el.style.width = '300px';
 el.style.transform = 'translate3d(0, 25px, 0)';

});

【问题讨论】：

即使我使用 rom 转换移除闪烁仍然存在。一个问题你所说的改变“宽度和左边不是性能”是什么意思？
更新评论解释：-)
你用的是什么浏览器？由于“translate3d”正在使用您的浏览器引擎..并尝试在浏览器之间切换以查看不同的行为。
如果我使用 left 和 width 它看起来很平滑......但我发现 translate3d 的性能更快，所以我猜它可能不会在那个细粒度级别上进行计算，这可能是闪烁的原因。
您知道，使用 FireFox 可以正常工作。所以也许这是一个 Chrome 错误。

标签： javascript html css

【解决方案1】：

您可以通过从右侧移动绿色框而不是从左侧移动它来解决此问题。例如。 http://jsbin.com/ximigitawe/1/

【讨论】：

感谢您的建议，但示例有点简化。它不一定从边缘渲染。想象它是三个盒子，中间的一个是动画的。你会遇到同样的问题 :-/ 很好的建议！