继续一个无限的CSS动画，直到它的最后一帧才停止

Question

我有一个定义的CSS类spin，它在元素上创建一个简单的CSS动画微调器

@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spin {
animation: spin .8s linear .15s infinite;
}

spin类是通过JavaScript添加和删除的，但是当删除该类时，动画会突然剪切并显示第一帧。有没有办法让浏览器继续为元素设置动画，直到它到达最后一帧？

我厌倦了进行animation-fill-mode的多个组合或将animation-iteration-count: 1设置在"；"休息"；元素(即，当它不具有spin类时是同一个元素(，但什么都不起作用。有什么办法让它发挥作用吗？

Answer 1

如果我们将其与animationiteration事件结合起来，我们就可以做到。

const spin = document.querySelector(".spin");
let iterationCount = 0;
let isMouseover = 0;
spin.addEventListener('animationiteration', () => {
iterationCount = 1;
if (iterationCount && isMouseover) {
spin.classList.remove("animation");
} else {
iterationCount = 0;
}
});
spin.addEventListener("mouseover", () => {
isMouseover = 1;
});
spin.addEventListener("mouseout", () => {
isMouseover = 0;
spin.classList.add("animation");
});

@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.spin {
height: 100px;
width: 100px;
background: yellow;
border-right: 4px solid green;
border-left: 4px solid red;
border-top: 4px solid black;
border-bottom: 4px solid blue;
}
.spin.animation {
animation: spin .8s linear .15s infinite;
}

<div class="spin animation"></div>

也可以点击：

const spin = document.querySelector(".spin");
let iterationCount = 0;
let isClicked = 0;
spin.addEventListener('animationiteration', () => {
iterationCount = 1;
if (iterationCount && isClicked) {
spin.classList.remove("animation");
} else {
iterationCount = 0;
}
});
spin.addEventListener("click", () => {
if (isClicked) {
isClicked = 0;
spin.classList.add("animation");
} else {
isClicked = 1;
}
});

@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.spin {
height: 100px;
width: 100px;
background: yellow;
border-right: 4px solid green;
border-left: 4px solid red;
border-top: 4px solid black;
border-bottom: 4px solid blue;
}
.spin.animation {
animation: spin .8s linear .15s infinite;
}

<div class="spin animation"></div>