我有一个定义了 transition 属性的元素。我通过切换类在两种状态之间设置动画。
但是，在 Edge(40.15063.674.0，EdgeHTML 15.15063)中，如果之前的转换尚未完成，则转换不是动画的(状态会立即更改)。
这是一个最小的片段。请注意，方 block 不应不连续地跳跃。
const div = document.getElementById("div");
setInterval(() => {
div.classList.add("translate");
setTimeout(() => {
div.classList.remove("translate");
}, 500);
}, 2000);#div {
transition: 1000ms;
width: 300px;
height: 300px;
background-color: red;
}
.translate {
transform: translate(200px, 0);
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="div">Test</div>
</body>
</html>我该如何解决这个错误？
我尝试按照建议设置 transition-property here , 但它没有帮助。
最佳答案
下面的代码在边缘运行良好。删除翻译类后，我在 #div 中添加了 translate(0, 0) 以回到默认位置。还可以将 #div 与 .translate 类结合使用以覆盖 css。
const div = document.getElementById("div");
setInterval(() => {
div.classList.add("translate");
setTimeout(() => {
div.classList.remove("translate");
}, 1000);
}, 2000);#div {
transition: 1000ms;
width: 300px;
height: 300px;
background-color: red;
transform: translate(0, 0);
}
#div.translate {
transform: translate(200px, 0);
}<div id="div">Test</div>关于css - 在 Edge 中更改元素的类后，过渡不是动画的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46724161/