点击切换 上面的框就旋转180°
但是只能切换一次 第二次按就没用了 怎么能让他按一次旋转一次呢 用keyframes动画或者transition
求解答!
点击切换 上面的框就旋转180°
下午好🌅🌅🌅
本答案参考ChatGPT-3.5
**解决这个问题的关键在于让animation-play-state
属性可以动态切换,以实现连续的点击效果。**以下是可能的解决方案:
<input type="button">
,作为触发连续旋转的按钮。animation-play-state
的状态。<button id="toggleButton">点击切换</button>
<input type="checkbox" id="checkbox" class="bigk" />
<script>
document.getElementById("toggleButton").addEventListener("click", function() {
const checkbox = document.getElementById("checkbox");
if (checkbox.classList.contains("paused")) {
checkbox.style.animationPlayState = "running";
} else {
checkbox.style.animationPlayState = "paused";
}
});
</script>
:hover
伪类结合JavaScript:
:hover
伪类,配合JavaScript来控制动画状态。.bigk:hover {
animation-play-state: running;
}
data-*
属性存储状态:
data-state
属性,并在JavaScript中检查它的值,来决定是否播放动画。<input type="checkbox" id="checkbox" data-state="paused" class="bigk" ...>
<script>
const checkbox = document.getElementById("checkbox");
checkbox.addEventListener("click", function() {
this.dataset.state = this.dataset.state === "paused" ? "running" : "paused";
});
</script>
以上任一方案都可以让你的元素在每次点击时重复执行旋转动画。选择最适合你的场景的方法即可。