パッとできる！Vue.jsを使ってカードの手札を広げるアニメーションを表現してみる - Qiita

はじめに Vue.jsを使って、トランプのカードを広げるような表現を作ってみました。 v-forやクラス・スタイルバインィングなどを使うことで、 簡単に実装することができます。 早速仕組みを説明しつつ、コードを見せていきます。 骨組みを作成 まずは、カードを枚数分重ねた状態で表示、 カードを広げるためのボタン、リセット用のボタンと、 手札を広げた時にわかりやすいように色をバインディングしておきます。 今回はRGB値の緑と青の値を Indexごとに20倍して、16進数に直して表現してます。（適当） 重なりを表現するために、positionはabsoluteで表現しており、 最初の数が一番上に来るように、z-indexをバインディングし、 変数にカードの上限（maxNum）を用意して、 Indexから引いていきます。 v-forでカードの枚数分ループを回して、 div要素を連ねていきます。 t