この記事は Vue.js #3 Advent Calendar 2018 の19日目の記事です。
Vue で動くものを作る
要素の動きを扱おうとする場合，CSS のみで記述すると複雑となってしまいます．
Vue には要素の動きを扱う トランジション があります．
Vue のドキュメントのトランジションのページを見ていただくと，いろいろと動くデモが載っています．
この記事では，このトランジションを利用して，ゲームを作るときに利用できそうな動きを例示していきます．
カードがめくれる動き（transition）
- Vue の
transitionを利用します - この機能は基本的に 要素が現れる/消える ときの動きを扱ってくれます
作成例
- カードがひっくり返る動作のデモです
- カードが現れる/消えるときにカードが90度回転するようにしてあげています
実装のポイント
-
<transition>にmode="out-in"を記述する -
<transition>内のタグに個別のkeyを設定するのを忘れないようにする（少しハマった）
リストが入れ替わる動き（transition-group）
- Vue の
transition-groupを利用します - この機能はリストの並べ替えの動きを扱ってくれます
- [Vue公式のリスト移動トランジション] (https://jp.vuejs.org/v2/guide/transitions.html#%E3%83%AA%E3%82%B9%E3%83%88%E7%A7%BB%E5%8B%95%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B8%E3%82%B7%E3%83%A7%E3%83%B3) のデモを触ってみると動作の様子がわかると思います
作成例
- 15パズルです
- 必ず解けるようなシャッフルに出来ておらず，完成しても何も起きませんので，動きを見てみるだけにとどめてください（すみません．．．）
キャラクターなどが動く動き（transition-group）
- transition-group でリスト以外の動きも扱えます．
- CSS の記述がプロパティ１つで済むため，気軽に扱えます．
作成例
- 画面の十字ボタンで
ε( ε ˙³˙)зがうごきます
おわりに
- Vue で動きを制御する方法をまとめてみました
- （ゲームとしてはまだ未完成の部分もありますが）Vue を利用することで動きのある画面を手軽に作れることがお見せすることは出来たと思います