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-animation-transitions-transitions-javascript/

我确定本文将为您提供确切的答案。在暂停的动画游戏中，有许多工作可以使当前的密钥帧值获得。然后，使用这些值，您可以使用动画API来构建反向动画。如果您可以将反向动画传递为暂停密钥帧值作为起始位置值。然后，您可以将动画端键帧设置为paddingleft：0px-正是它的启动方式。

这将解决不必要的跳跃到动画的末端。