当我按下太阳时，我创建了一个带动画的 SVG 风景。然而动画只能运行一次，之后就不再运行了。
这是我现有的 JS 代码。
const sun = document.getElementById("sun");
const stage = document.getElementById("stage");
sun.addEventListener("click", function() {
sun.style.animationPlayState = "running";
stage.style.animationPlayState = "running";
});
sun.addEventListener("animationend", function() {
// Reset sun position to its initial values
sun.setAttribute("cx", "700");
sun.setAttribute("cy", "100");
// Set animation state to paused for both sun and stage
sun.style.animationPlayState = "paused";
stage.style.animationPlayState = "paused";
});
有一篇关于此的文章，您可以在此处阅读重新启动 CSS 动画。据我了解，问题在于 CSS 没有能力在动画播放后重新启动动画。
除了文章中给出的解决方案之外，我发现这可以重置动画，这样当您再次单击太阳时，它会重新执行动画。
<html>
<style>
@keyframes move-left {
0% {
left: 0;
}
100% {
transform: translateX(100px);
}
}
.animation {
animation: move-left 1s ease-in backwards;
animation-play-state: paused;
}
#sun {
position: absolute;
width: 40px;
background: red;
}
</style>
<body>
<div id="sun">.</div>
</body>
<script>
const sun = document.getElementById("sun");
const stage = document.getElementById("stage");
sun.addEventListener("click", function () {
sun.classList.add("animation");
sun.style.animationPlayState = "running";
stage.style.animationPlayState = "running";
});
sun.addEventListener("animationend", function () {
// Reset sun position to its initial values
sun.setAttribute("cx", "700");
sun.setAttribute("cy", "100");
// Set animation state to paused for both sun and stage
sun.classList.remove("animation");
});
</script>
</html>
通过添加一个类
onclickanimationend