Question

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

启动Chrome：

单击测试按钮
单击test2按钮
你会看到绿色的条纹闪烁。我想这是因为＆＃34; translate3d＆＃34;不会以相同的方式计算其像素＆＃34;宽度＆＃34;确实

使用＆＃34;左＆＃34;和＆＃34;宽度＆＃34;属性在一起它完美地工作，但它不是高效的。原因是translate3d触发HW加速并使用子像素计算，这给出了非常平滑的动画。

这是一个错误吗？它可以解决吗？使用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)';

});

Answer 1

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

在转换时使用宽度和变换会导致闪烁

1 个答案: