가장자리의 요소 클래스를 변경 한 후 전환이 애니메이션으로 적용되지 않습니다.

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으로 설정했지만 도움이되지 않았습니다.

출처

2017-10-13 Spike

아래 코드는 가장자리에서 잘 작동합니다. translate 클래스를 제거한 후 #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>

출처

2017-10-13 11:03:09

가장자리의 요소 클래스를 변경 한 후 전환이 애니메이션으로 적용되지 않습니다.

답변

관련 문제