Vue.jsで要素を点滅させる方法

Question

jQueryにカスタム関数があり、クリックすると要素が点滅します。 Vueでこれを行う正しい方法は何ですか？

私はディレクティブで終了すると思いますか？それを作る方法はありますか？私はそれをクリックすると点滅させるために "blinkable"を任意の要素に加えることができますか？

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

また、方法といくつかのバニラ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アニメーション

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>

でいいよ