Javascript不打斷CSS動畫

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/

不確定您如何嘗試應用所需的效果，但是在示例中，我將應用帶有過渡的類，然后在中斷時將不透明度設置為當前的不透明度，然后刪除過渡類。