Question

考虑以下代码（简化）：

HTML：

<button>move!</button>
<div/>

JS：

var div = document.getElementsByTagName('div')[0]
var x = 0

document.getElementsByTagName('button')[0].onclick = function () {
  x = x + 100
  div.style.transform = 'translate3d(' + x + 'px, 0,0)'
}

的CSS：

div {
  background: red;
  width: 100px;
  height: 100px;
  transition: transform 0.5s linear;
}

在转换期间重复更改转换属性将导致div在转换为正确值之前闪烁（朝向上一个起始位置）。

这似乎只发生在MS浏览器上（在IE11和MS Edge上测试）。

还在Chrome，Safari，FF上进行了测试，这些都按预期工作。

请参阅小提琴：https://jsfiddle.net/youridaamen/8pnLfmpt/12/

相关：MS Edge CSS transform transition flickering on mouse move

Answer 1

我已将转换样式更改为marginLeft，它似乎更好（在IE上）。 jsfiddle

<强>的Javascript / JQuery的：

var buttons = document.getElementsByTagName('button')
var start = buttons[0]
var reset = buttons[1]
var div = document.getElementsByTagName('div')[0]
var x = 0

start.onclick = function () {
x+=100;
div.style.marginLeft = x + "px";
}

reset.onclick = function () {
x = 0
div.style.marginLeft = x + "px";
}

转换期间更新转换会导致IE和MS边缘的转换为闪烁

1 个答案: