Vue.jsでアニメーション！

天気の悪い日が続きますが、皆様、いかがお過ごしでしょうか。
明日から連休ということもあり、晴れることを祈るばかりです。
さて、本日は、今人気のJavascriptフレームワーク「Vue.js」を用いて、かんたんなアニメーションを作成しましたので、ご紹介いたします。
Vue.jsはフレームワークの中でも、学習コストが低く、特別な環境を用意せずとも、すぐに学習が始められます！

ご興味をもたれた方は、ぜひ、お気軽に試してみてくださいね。
Vue.jsは以下の公式サイトよりダウンロード等していただけます。
Vue.js公式サイトはこちら ＞＞

実際の動き

まずは、実際の動きを御覧ください。
動きの仕様自体は複雑なものではなく、シンプルなものになっております。
ボタンをクリックすると、四角い要素の表示・非表示が切り替わる、というものです。

このコードの中では、3つ、Vue.js特有の記法を用いた箇所があります。
順に1つずつ、ご紹介いたします。

Mustache構文

Vue.jsの基本といえば、このMustache（マスタッシュ）構文になるかと思います。
「Mustache」とは、「ひげ」意味で、その記法「{{}}」、「{」を横にしたものが、ひげのように見えることから、そのように呼ばれているそうです。
使い方はとてもかんたんで、javascriptの中に、「data: 」の箇所のように書いた内容が、htmlの該当箇所に表示されます。
ちなみに、ここでは割愛しますが、「{{}}」の中にはjavascriptの一部のコードも入力することが可能です。

v-ifについて

「v-if=”show”」という表示についてですが、このように書くと、「show」の値が「true」の場合に要素が挿入されるようになります。
今回は、button要素のクリックイベントに「show」のブール値の切り替えを登録してあるので、クリックごとに、showの値が入れ替わり、要素が挿入されたり、削除されたりします。
余談ですが、「v-show」とすると、要素の挿入ではなく、「display: none;」のつけ外しにより、要素の表示・非表示をコントロールすることができます。

transition要素について

Vue.jsでは、アニメーションを与えたい要素を、transitionという要素でマークアップしておきます。
このとき、アニメーションの開始と同時に一瞬だけ「v-enter」というクラスが付与されます。これを用いて、cssで、「opacity: 0」を予め設定しておきます。
もともと、この要素にはtransitionを設定してあるため、要素がフェードアウトしていく仕組みです。
また、同じように、要素が消えていくときには、一瞬だけ「v-leave-to」というクラスが付与されるので、これを用いてアニメーションを行っています。

まとめ

いかがでしたでしょうか。
今回はかんたんなアニメーションのみでしたが、Vue.jsにはもっといろんな使い方があります。
興味を持たれた方はぜひ、お試しください！