javascript - CSS 动画，点击开始和停止无限动画

Question

没有 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;
}

Answer 1

假设这个(来自您的 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;
}

希望对你有帮助