Question

我知道我们可以使用下面的css按指定的次数闪烁div：

HTML：

<div class="blink">blinking text</div>

的CSS：

@-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
.blink {
-webkit-animation: blinker 1s 5;
-moz-animation: blinker 1s 5;
animation: blinker 1s 5;
}

通过使用css方式，div在加载页面后会闪烁而不会调用任何js函数。但是，如果我想在用户按下按钮后重新闪烁div，该怎么办？没有任何功能可以呼叫＆＃34; onclick＆＃34;。

<button onclick="">BLINK AGAIN!</button>

知道该怎么做吗？

JSFIDDLE

Answer 1

您需要删除类'blink'然后再将其添加回来，以便重新启动CSS动画

您需要使用setTimeout，以便在将类从中删除之前没有添加类

$("#blinkagain").click(function() {
    var $el = $(".blink");
    $el.removeClass("blink");
    setTimeout(function() {$el.addClass("blink");}, 500);
});

@-webkit-keyframes blinker {
  0% {
    opacity: 1.0;
  }
  50% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}
@-moz-keyframes blinker {
  0% {
    opacity: 1.0;
  }
  50% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}
.blink {
  -webkit-animation: blinker 1s 5;
  -moz-animation: blinker 1s 5;
  animation: blinker 1s 5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blink">blinking text</div>
<button id="blinkagain">BLINK AGAIN!</button>

如何使用CSS重新闪烁div？

1 个答案: