如何在 Vue.js 中使元素闪烁

Question

我在 jQuery 中有一个自定义函数，它使元素在单击时闪烁。在 Vue 中执行此操作的正确方法是什么？

我认为这是通过指令完成的？有没有办法让我可以向任何元素添加“可闪烁”，使其在单击时闪烁？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$.fn.blink = function () {
	var button = this;
	var theinterval = setInterval(function(){
		button.toggleClass("blink");
	}, 20);
	setTimeout(function(){
		clearInterval(theinterval);
		button.removeClass("blink");
	}, 400);
};

$("document").ready(function () {

  $("div.blinkable").click(function () {

    $(this).blink();

  });
  
});
</script>

<style>
div.button {
  background:purple;
  color:white;
  margin-bottom:2px;
  padding:5px;
}

div.blink {
  background:red;
}
</style>

<div class="button blinkable">button 1</div>
<div class="button blinkable">button 2</div>
<div class="button blinkable">button 3</div>
<div class="button blinkable">button 4</div>

Answer 1

我只想使用纯 CSS 动画

div.button {
  background:purple;
  color:white;
  margin-bottom:2px;
  padding:5px;
}

div.button:active {
  animation: blink 0.02s 20 alternate;
}

@keyframes blink {
  from { background-color: purple; }
  to { background-color: red; }
}

<div class="button blinkable">button 1</div>
<div class="button blinkable">button 2</div>
<div class="button blinkable">button 3</div>
<div class="button blinkable">button 4</div>