クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

【Vue.js】transitionタグでアニメーション効果をつける

Vue.jsの続きです。前回watch(監視プロパティ)で簡単なクイズを作りました。今回はtransitionタグというVue.jsの独自タグでアニメーション効果をつけます。それでは、いきましょう!

【目次】

※参考:【Vue.js】watch(監視プロパティ)で戦国時代クイズを作った - クモのようにコツコツと

transitionの書式(HTMLとCSS)

HTMLファイル内で、アニメーションさせたい要素をtransitionタグで囲う。

<transition>
    <!-- アニメーションさせたい要素を書く -->
</transition>

なお、複数のリストをアニメーションさせたいときはtransition-groupタグで囲う。

<transition-group>
    <!-- アニメーションさせたいリストを書く -->
</transition-group >

アニメーションはCSSで設定する。あらかじめ用意されたclass名がある。
要素がアニメーション中に属性に下記のclass名が追加される。

現れるアニメのclassはこの3つ。

/*現れる時*/
/*現れる前の状態*/
.v-enter { プロパティ: 値;}

/*現れる間の動き*/
.v-enter-active { プロパティ: 値;}

/*現れた後の状態*/
.v-enter-to { プロパティ: 値;}

消える時のclass名。

/*消える時*/
/*消える前の状態*/
.v-leave { プロパティ: 値;}

/*消えている間の動き*/
.v-leave-actiove { プロパティ: 値;}

/*消えた後の状態*/
.v-leave-to { プロパティ: 値;}

現れるときのenterleaveになったバージョン。

移動させるときのclass名。

/*移動中*/
/*移動中の動き*/
.v-move { プロパティ: 値;}

それでは、実際に作ってみる。

アニメーションなしの状態

まず、下記がアニメーションをつけるまえの状態。

See the Pen vue transition 00 by イイダリョウ (@i_ryo) on CodePen.

名前を入れると下に「○○○と申します!」というセリフが現れる。

HTMLのコード

<div id="tony">
  <h1>トニーの部屋</h1>
  <p>「あなたのお名前なんて〜の?」</p>
  <hr>
  <input type="text" v-model="name" placeholder="お名前">
  <hr>
    <p v-if="name">「{{ name }}と申します!」</p>
</div>
  • 外側のdivのid名はTony
  • inputタグにv-model属性。値はname
  • pタグのv-if属性。値はname。中にもマスタッシュタグでnameを埋め込み。

JSのコード

new Vue({
  el: '#tony',
  data: {
    name: ''
  }
});
  • Vueいんすたんす作成。引数の中身は連想配列
  • elキーの値が#tonydivと紐づいている
  • dateキーの値は連想配列。nameキーの値は空欄(初期値)

これまでやってきたことと変わらない。これにアニメーションをつけたい。

アニメーションをつけた状態

アニメーションを付けたバージョン

See the Pen vue transition 01 by イイダリョウ (@i_ryo) on CodePen.

「○○○と申します!」というセリフがフワッと現れる。また、空欄にしたときもフワッと消える。

HTMLのコード

  <transition>
    <p v-if="name">「{{ name }}と申します!」</p>
  </transition>
  • v-if属性の入ったpタグをtransitionタグで囲む。(ここをアニメーションさせる)

CSSのコードに下記を追記

.v-enter,
.v-leave-to {
  opacity: 0;
}

.v-enter-active,
.v-leave-active {
  transition: 1s;
}
  • 現れる前と消えたあとのを透明(不透明度0)に
  • 現れる間と消える間のアニメーションの長さを1秒(1s)に

JSのコードは変更なし。これでフワッとなった。

最後に

f:id:idr_zz:20190711230702j:plain

Vue.jsのアニメーションはこれまで書いてきた形にtransitionタグやCSS設定を追記するだけなので簡単でした!アニメーション部分をCSSにさせて、JSのイベントのトリガーに止めるのも最近のJSの傾向とマッチしていますね!

次回は、Vue.jsとGoogle Chartsを連携して、グラフの表示をやってみる予定。それではまた!


※参考:Vue.jsの習得のためにやったことまとめ
qiita.com