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

有没有办法做到这一点没有JavaScript或我必须使用JS从对象追加/删除类？你们能向我展示一些现场实例吗？现在我有一些作品只在对象的悬停：CSS动画，点击启动和停止无限动画

.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; 
}

来源

2017-09-27 Another Chris

有一个在CSS –

没有点击操作，你必须使用JavaScript或jQuery的。 –

你可以告诉我怎么做？ –

假设这（从你的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; 
}

我希望它能帮助

来源

2017-09-27 07:43:02

个人而言，我喜欢这个答案最好。 – Manticore

谢谢，@Manticore！ –

这不是在CSS可能的，但是如果你有兴趣在JavaScript例如：

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

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

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

});

更换element与按钮或锚点，激活类的删除/添加。并用应该动画的元素替换target。

此解决方案需要jQuery。

来源

2017-09-27 07:39:27

您可能想要注意，此JS解决方案需要jQuery –

@MatthiasS。只是做:) –

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; 
 
    } 
 
})

.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; 
 
}

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

来源

2017-09-27 07:52:49 JiangangXiong

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

回答

相关问题