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

Question

我在jQuery中有一个自定义函数，它会在单击时使元素闪烁。在Vue中这样做的正确方法是什么？

我认为它是用指令完成的？有没有办法让它可以添加＆＃34;闪烁＆＃34;单击时任何元素都会闪烁？

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

你也可以用一个方法和一些普通的JS来做：https://codepen.io/aprouja1/pen/QgJZEP

methods: {
    blink(event) {

  event.target.style.background = 'red'
  setTimeout(()=>{
    event.target.style.background = 'purple'
  },500)

    }

Answer 2

我只是选择纯CSS动画

＆＃13;

＆＃13;

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; }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;