Javascript 在过渡时使用“宽度”和“变换”会导致闪烁

查看此JSBIN：

点燃铬：

单击测试按钮

单击test2按钮

您将看到绿色条闪烁。我想这是因为“translate3d”计算像素的方式与“width”不同

当同时使用“left”和“width”属性时，它可以完美地工作，但性能不太好。原因是translate3d触发硬件加速，并使用亚像素计算，从而产生极其平滑的动画

是虫子吗？它是可解的吗？使用Firefox，效果非常好！那么可能是一个Chrome bug

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 bug。谢谢你的建议，但是这个例子有点简化了。它不一定从边渲染。想象一下，它是三个盒子，其中一个在中间是动画。你会遇到同样的问题：-/不过建议不错！