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>

使用PURE JAVASCRIPT：

<div class="clicker" onclick="this.nextElementSibling.classList.toggle('paused');">[Your Content]</div>
<div class="circle">[Your Content]</div>

WITH JQUERY：

$('.clicker').click(function(){
    $(this).next('.circle').toggleClass('paused');
});

您还没有发布您的HTML，因此我使用的JavaScript / jQuery选择器都基于您的CSS。要获得最佳选择器的更具体的答案，您应该显示您的HTML。

修改

我刚刚意识到使用此解决方案可能会导致您的CSS出现问题，因为.circle样式优先于.paused，因此该类已被切换但样式不是＆＃39改变。您可以轻松地解决它调整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; }

我希望它有所帮助

Answer 2

这在CSS中是不可能的，但是如果您对JavaScript示例感兴趣：

$(element).on('click', function () {

    if ($(target).hasClass('paused'))
    {
        $(target).removeClass('paused');
    }

    else 
    {
        $(target).addClass('paused');
    }

});

将element替换为激活类删除/添加的按钮或锚点。并将target替换为应该设置动画的元素。

此解决方案需要 jQuery 。

Answer 3

＆＃13;

var active = document.querySelector('.active');
var div = document.querySelector('.wrap');
var hasAnimationPaused = false;
var aniamtionPausedClass = 'paused'

div.className += ' circle';
active.addEventListener('click', function(e) {
  var classNames = div.className.split(' ');
  if (!hasAnimationPaused) {
    div.className += ' ' + aniamtionPausedClass;
    hasAnimationPaused = true;
  } else {
    classNames.splice(classNames.indexOf(aniamtionPausedClass), 1);

    div.className = classNames.join(' ');
    hasAnimationPaused = false;
  }
})

＆＃13;

.wrap {
  color: black;
}
@keyframes rotor {
from {
  color: red;
}
50% {
  color: yellow;
}
to {
  color: blue;
}
}
.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;
}

＆＃13;

<div class="wrap"> TEst Test</div>
<button class="active">CLick</button>

＆＃13;

CSS动画，点击时启动和停止无限动画

3 个答案: