CSS-類添加/刪除上的過渡動畫

Question

我正在嘗試設置過渡到作為動畫一部分應用的變換。 在此codepen示例和此處的內聯代碼中，我添加了一個類來啟動/停止動畫關鍵幀。 單擊該按鈕停止旋轉時，它將捕捉回到起始幀。

它是否可以完成旋轉或平穩回滾到其初始狀態？

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

 .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); } } 

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

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');
    }
});