0
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을 제안한대로 시도했으나 here으로 설정했지만 도움이되지 않았습니다.