在 Edge 中更改元素的类后，过渡没有动画效果答案

【问题标题】：Transition is not animated after changing element's class in Edge在 Edge 中更改元素的类后，过渡没有动画效果
【发布时间】：2018-03-25 06:00:29
【问题描述】：

我有一个定义了transition 属性的元素。我通过切换一个类在两个状态之间设置动画。

但是，在 Edge（40.15063.674.0，EdgeHTML 15.15063）中，如果先前的转换尚未完成，则不会为转换设置动画（而是立即更改状态）。

这是一个最小的 sn-p。请注意，方块不应断断续续地跳跃。

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>

我该如何解决这个错误？

我尝试按照建议的here 设置transition-property，但没有帮助。

【问题讨论】：

标签： css css-transitions microsoft-edge css-transforms

【解决方案1】：

以下代码在边缘运行良好。删除翻译类后，我在#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);
}

&lt;div id="div"&gt;Test&lt;/div&gt;

【讨论】：