CSS 애니메이션 - 애니메이션 중지 및 되돌리기

Question

버튼을 클릭 할 때 내 맞춤 요소를 200 픽셀 오른쪽으로 이동시키고 싶습니다. 요소가 클릭시 이동하기 시작합니다. 애니메이션에서 버튼을 다시 클릭하여 중지하고 요소가 초기 상태 (현재 상태에서 역 애니메이션)로 애니메이션 반환되도록 할 수 있어야합니다.

나는 CSS 전환과이를 달성 : 이

var state = false; 
 
var button = document.getElementById("but"); 
 

 
button.onclick = clickA; 
 

 
function clickA(){ 
 
    
 
    state = !state; 
 
    
 
    var el = document.getElementById("el"); 
 
    if (state) el.setAttribute("class", "animatedElement open"); 
 
    else el.setAttribute("class", "animatedElement"); 
 
}

.animatedElement { 
 
    padding-left: 0px; 
 
    transition: padding-left 5s; 
 
} 
 

 
.open { 
 
    padding-left: 200px; 
 
}

<button id="but">Click</button> 
 
<div id="el">element</div>

그래서 클릭에 난 그냥 구성 요소에 .open 클래스를 전환합니다.

저는 이것이 CSS 애니메이션과 관련이 있는지 알고 싶습니까? 나는이 시도 :

var state = false; 
 
var button = document.getElementById("but"); 
 

 
button.onclick = clickA; 
 

 
function clickA(){ 
 
    
 
    state = !state; 
 
    
 
    var el = document.getElementById("el"); 
 
    if (state) el.setAttribute("class", "animatedComponent-open"); 
 
    else el.setAttribute("class", "animatedComponent-close"); 
 
}

@keyframes animationOpen { 
 
    0% {padding-left: 0px;} 
 
    100% {padding-left: 200px;} 
 
} 
 
.animatedComponent-open { 
 
    animation: animationOpen 3s normal forwards; 
 
} 
 
    
 
@keyframes animationClose { 
 
    0% {padding-left: 0px;} 
 
    100% {padding-left: 200px;} 
 
} 
 
.animatedComponent-close { 
 
    animation: animationClose 3s reverse forwards; 
 
}

<button id="but">Click</button> 
 
<div id="el">element</div>

을하지만 애니메이션의 중간에 클릭 할 때이 열린 애니메이션을 되돌릴 수는 없지만, 최종 상태로 이동 한 후 처음부터 가까운 애니메이션을 재생합니다.

Answer 1

키 프레임에는 시작점과 끝점이 있으므로 요소의 현재 위치가 어디에 있든 관계없이 해당 위치에서 시작됩니다. 전환하려면 js를 사용하고 있기 때문에 전환 방법이 필요합니다. 애니메이션은 어떤 이점도없이 더 복잡하게 만듭니다.

Answer 2

방문 https://css-tricks.com/controlling-css-animations-transitions-javascript/

나는이 문서가 당신을 위해 정확한 답변을 확신합니다. 일시 중지 된 애니메이션 재생 상태에서 현재 키 프레임 값을 가져 오는 많은 해결 방법이 있습니다. 그런 다음이 값을 사용하여 애니메이션 API를 사용하여 역방향 애니메이션을 만들 수 있습니다. 역 애니메이션을 전달할 수있는 경우 일시 중지 키 프레임 값을 시작 위치 값으로 전달할 수 있습니다. 그런 다음 애니메이션 끝 키 프레임을 paddingLeft : 0px로 설정할 수 있습니다.

이렇게하면 애니메이션 끝으로 원치 않는 점프가 해결됩니다.