CSS動畫-停止並還原動畫

Question

我希望自定義元素在單擊按鈕時向右移動200px。 因此，元素開始在點擊時移動。 在動畫中時，我希望能夠再次單擊該按鈕以停止並讓該元素具有動畫的返回初始狀態（從當前狀態反向動畫）。

我通過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/

我相信本文將為您提供確切的答案。 有許多變通方法可以在動畫播放暫停狀態下獲取當前的關鍵幀值。 然后，使用這些值，您可以使用animate api構建反向動畫。 如果可以通過反向動畫，則將暫停關鍵幀值作為起始位置值。 然后，您可以將動畫結束關鍵幀設置為paddingLeft：0px-就像它是如何開始的。

這將解決不必要的跳轉到動畫結尾的問題。