Transition is not animated after changing element's class in Edge

Question

I have an element with a transition property defined. I animate it between two states by toggling a class.

However, in Edge (40.15063.674.0, EdgeHTML 15.15063), a transition is not animated (the state changes immediately instead) if a previous transition has not finished.

Here's a minimal snippet. Note that the square should never jump discontinuously.

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>

How can I work around this bug?

I tried setting transition-property as suggested here, but it didn't help.

score 0 · Answer 1 · answered Oct 13 '17 at 11:03

Below code is working fine in edge. I have added translate(0, 0) in #div to back in default position after removing translate class. Also combine #div with .translate class to overwrite 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>

Transition is not animated after changing element's class in Edge

1 Answers1