javascript - 性能友好的闪烁效果

我很想添加这样的闪烁效果，但是我认为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过渡？

最佳答案

使用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>

关于javascript - 性能友好的闪烁效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43540496/