CSS - 类添加/删除过渡动画

Question

我尝试设置转换为应用为动画的一部分的转换。在此codepen example和内联中，我添加了一个类来启动/停止动画关键帧。单击按钮停止旋转时，它会快速回到开始帧。

是否可以让它完成旋转或顺利回滚到它的开始状态？

＆＃13;

＆＃13;

var toggle2d = document.getElementById('toggle-2d');
var plain = document.querySelector('.plain');


toggle2d.onclick = () => {
 plain.classList.toggle('animate-2d');
}

＆＃13;

.plain {
  top: 50%;
  left: 50%;
  display: flex;
	align-items: center;
	justify-content: center;
  position: absolute;
}

.orbit {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  position: absolute;

  transform-style: preserve-3d;

  transition: all 1s linear;
}

.body {
  width: 30px;
  height: 30px;
  background-color: brown;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

.animate-2d .orbit {
  transition: all 1s linear;
  animation: orbit-cw infinite linear;
  animation-duration: 5s;
  animation-fill-mode: both;
}

@keyframes orbit-cw {
  100% {
    transform: rotateZ(360deg);
  }
}

＆＃13;

<button type="button" id="toggle-2d">toggle 2d</button>
<div class="plain">
  <div class="orbit">
    <div class="body">
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用animationiteration事件来实现此目标。

var stopRequested = false;

toggle2d.onclick = () => {
    stopRequested = !stopRequested;
    if(!stopRequested) {
        plain.classList.add('animate-2d');
    }
}

plain.addEventListener("animationiteration", function(){
    if(stopRequested){
        plain.classList.remove('animate-2d');
    }
});