性能友好的閃爍效果

我很想加入這樣的閃爍效果，但我覺得setInterval是矯枉過正什麼是純粹的化妝品東西：性能友好的閃爍效果

jQuery(function(){ 
 
    $("#watch").each(function(){ 
 
    var $box = $(this); 
 
    var show = true; 
 
    setInterval(function(){ 
 
     var m = moment(); 
 
     $box.text(show ? m.format('H:mm') : m.format('H mm')); 
 
     show = !show; 
 
    }, 500); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script> 
 
<div id="watch">--:--</div>

是否有一個較新的JavaScript我可以使用的API，或者可能是CSS轉換？

來源

2017-04-21 Álvaro González

你的意思是這樣的[this]（http://stackoverflow.com/questions/16344354/how-to-make-blinking-flashing-text-with-css3）我想你會不得不包裝' ：'在span標籤中來實現它。 – George

我認爲在這種情況下使用CSS簡單地應用動畫並使用jQuery將其移除用於某些事件會更好。 – snkv

使用this答案提供的CSS，你可以做到這一點

jQuery(function() { 
 
    $("#watch").each(function() { 
 
    var $box = $(this); 
 
    setInterval(function() { 
 
     var m = moment(); 
 
     $box.html(m.format('H') + '<span class="blink_me">:</span>' + m.format('mm')); 
 
    }, 1000); 
 

 
    }); 
 
});

.blink_me { 
 
    animation: blinker 1s infinite; 
 
} 
 

 
@keyframes blinker { 
 
    50% { 
 
    opacity: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script> 
 
<div id="watch">--:--</div>

來源

2017-04-21 10:43:03 George

但時間顯示永遠不會改變 – charlietfl

@charlietfl固定，不知道爲什麼我刪除了'setInterval' – George

對於記錄，這是最終的CSS我寫了基於George's answer：

section { 
 
    font-size: 5rem; 
 
} 
 

 
.stop-watch span { 
 
    animation: blink 1s infinite; 
 
} 
 

 
@keyframes blink{ 
 
    0% { 
 
    animation-timing-function: steps(1, end); 
 
    opacity: 1; 
 
    } 
 
    50% { 
 
    animation-timing-function: steps(1, end); 
 
    opacity: 0; 
 
    } 
 
}

<section class="stop-watch"> 
 
1<span>:</span>59 
 
</section>

來源

2017-05-19 08:20:25

性能友好的閃爍效果

回答

相關問題