考虑以下代码(简化):
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 上进行了测试,它们都按预期工作。
参见 fiddle :https://jsfiddle.net/youridaamen/8pnLfmpt/12/
相关:MS Edge CSS transform transition flickering on mouse move
最佳答案
我已将变换样式更改为 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";
}
关于javascript - 在过渡期间更新变换会导致过渡在 IE 和 MS 边缘上闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45266478/