Question

我正在尝试使用JavaScript来中断淡化DIV元素的CSS动画。通过CSS的淡化文本工作正常，但是，定时JavaScript函数不会在设置的间隔“中断”淡入淡出。我一直在摸不着头脑，我想知道某些CSS动画是否不能被JavaScript中断/取消。非常感谢任何建议！

<style type="text/css">
#fadeMe {
    opacity:1.0;
    animation:fadeEffect 6s infinite;
    -webkit-animation:fadeEffect 6s infinite; /* Safari and Chrome */
}

@keyframes fadeEffect
{
    from { opacity: 1.0; }
    to { opacity: 0; }
}

@-webkit-keyframes fadeEffect /* Safari and Chrome */
{
    from { opacity: 1.0; }
    to { opacity: 0; }
}
</style>
<div id="fadeMe">
    <p> Fade this text </p>
</div>

<script type="text/javascript">
    setInterval(function(){interruptFade()},3000);
    function interruptFade() {
        var div = document.getElementById('fadeMe');
        div.style.opacity = "1.0";
    }
</script>

Answer 1

setInterval(function(){ interruptFade();},3000); function interruptFade() { var div = document.getElementById('fadeMe'); div.style.opacity += 0.1; }

Answer 2

你可以暂停动画。

setInterval(interruptFade, 3000);


function interruptFade() {
    var fade = document.getElementById("fadeMe");
    fade.style.webkitAnimationPlayState = 'paused';
}

示例小提琴：http://jsfiddle.net/39tv7/4/

您可以使用：

var fade = document.getElementById("fadeMe");
fade.style.webkitAnimationPlayState = 'running';

如果你想恢复动画。

Answer 3

您是否考虑过使用CSS transition代替animation？

http://jsfiddle.net/PW75k/

不确定您是如何尝试应用所需效果的，但在示例中我应用了一个带有转换的类，然后在中断时将不透明度设置为当前不透明度，然后删除转换类。

Javascript不会中断CSS动画

3 个答案: