0
J'ai un élément avec une propriété transition définie. Je l'anime entre deux états en faisant basculer une classe.La transition n'est pas animée après la modification de la classe d'élément dans Edge
Cependant, dans Edge (40.15063.674.0, EdgeHTML 15.15063), une transition n'est pas animée (l'état change immédiatement à la place) si une transition précédente n'est pas terminée.
Voici un extrait minimal. Notez que le carré ne devrait jamais sauter de façon discontinue.
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>Comment puis-je contourner ce bug?
J'ai essayé de définir transition-property comme suggéré here, mais cela n'a pas aidé.