javascript - 在过渡期间更新变换会导致过渡在 IE 和 MS 边缘上闪烁

标签 javascript css internet-explorer animation microsoft-edge

考虑以下代码(简化):

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/

相关文章:

javascript - 选择标题标签时删除粗体和斜体格式

javascript - 滚动时是否可以执行 "snap-to"效果?

css - 如何转换 margin : 0 auto to . rem( margin :. .)?

javascript - 在 IE 8/9 中使用 'use strict' 是否安全

jQuery 验证插件在 IE 中失败

javascript - 为什么我的nodejs pdf上传代码返回Status 415 "unsupported Media Type"

javascript - 如何在不运行服务器的情况下运行 dropzone.js 原型(prototype)?

css - css和xhtml中的每个元素和属性、属性是否有必要使用小写?

html - 如何使该网站适合所有屏幕尺寸?

internet-explorer - 如何在运行 Windows 7 时测试 IE 6 中的网站?