在 Edge 中更改元素的类后，过渡不动画化

我有一个定义了transition属性的元素。我通过切换一个类在两种状态之间对其进行动画处理。

但是，在 Edge （40.15063.674.0，EdgeHTML 15.15063）中，如果上一个过渡尚未完成，则不会对过渡进行动画处理（状态会立即更改）。

这是一个最小的片段。请注意，正方形不应不连续地跳跃。

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，但没有帮助。

下面的代码在边缘工作正常。我在删除翻译类后 #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>

相关内容

最新更新

热门标签：