クリックすると一瞬だけ光るボタンを作る

Vue.jsの勉強としてFizzbuzzゲームを作っている。数字を出して答えを4択で選ばせるのだが、選んだときに正解なら緑、不正解なら赤に一瞬だけ光らせたい。
Vue.jsのtransition/animationの項目を読んだが、これは要素を表示/非表示にするときの話で、色を変えるときの話ではなかった。
CSSの@keyframesを使おうともしたが、これは状態をAからBに変えるというものであり、今回のように色を変えてまた戻すという処理とは違う。

どう実装すればいいか悩んでいろいろ調べた結果、単純にCSSとJSで制御すればいいと気づいた。

実装

See the Pen Button Blink with CSS Transition by Udomomo (@Udomomo) on CodePen.

↑読み込まれないようなら下のリンクから見られる
Button Blink with CSS Transition

作り中のコードから引っ張ってきたのでVue.jsによる実装になっているが、この部分だけ見ればVue.jsならではの機能は全く使っていない。
まず、CSSでボタンのdiv要素全体のbackground-colorにtransitionを設定しておく。これで背景色が変わるときはアニメーションが発生するようになる。
そのうえで、JSでクリックイベントを検知し、背景色を変える処理をする。そして、一定時間が経ったらsetTimeoutを呼び出して元の色に戻す。
transitionの所要時間を十分短くし、かつそれより少しだけ長い時間を指定してsetTimeoutを発火させれば、一瞬だけ光って元に戻るように見える。

学んだこと

Vanilla JSは大事。
JSフレームワークの機能だけに囚われないようにしないと。