没有 javascript 有什么方法可以做到这一点,还是我必须使用 JS 来从对象中附加/删除类? 你们能给我一些活生生的例子吗? 现在我有一些东西只适用于悬停对象:
.clicker:hover + .circle {
-webkit-animation: rotor 1.5s linear 0s infinite normal;
-mox-animation: rotor 1.5s linear 0s infinite normal;
-o-animation: rotor 1.5s linear 0s infinite normal;
animation: rotor 1.5s linear 0s infinite normal;
}
.paused{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
}
最佳答案
假设这个(来自您的 CSS)...
<div class="clicker">[Your Content]</div>
<div class="circle">[Your Content]</div>
使用纯 JAVASCRIPT:
<div class="clicker" onclick="this.nextElementSibling.classList.toggle('paused');">[Your Content]</div>
<div class="circle">[Your Content]</div>
使用 JQUERY:
$('.clicker').click(function(){
$(this).next('.circle').toggleClass('paused');
});
您还没有发布您的 html,所以我使用的 JavaScript/jQuery 选择器是基于您的 CSS。要获得最佳选择器的更具体答案,您应该显示您的 html。
编辑:
我刚刚意识到,使用此解决方案,您的 CSS 可能会出现问题,因为 .circle
样式优先于 .paused
,因此该类已切换但风格没有改变。你可以很容易地解决它调整你的 CSS...
.clicker + .circle {
-webkit-animation: rotor 1.5s linear 0s infinite normal;
-mox-animation: rotor 1.5s linear 0s infinite normal;
-o-animation: rotor 1.5s linear 0s infinite normal;
animation: rotor 1.5s linear 0s infinite normal;
}
.paused {
-webkit-animation-play-state: paused !important;
-moz-animation-play-state: paused !important;
-o-animation-play-state: paused !important;
animation-play-state: paused !important;
}
希望对你有帮助
关于javascript - CSS 动画,点击开始和停止无限动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46442006/