0%

Programmingプログラミングナレッジ

Posted:2019.05.14

Vue.jsで簡単に要素へアニメーションを追加できるtransitionを使う

動的にコンテンツや要素などを切り替える際にアニメーションをつけたい時もあるかと思います。Vue.jsではそのような時のためにトランジションを使って手軽に効果をつけることができるものが用意されています。今回はVue.jsのtransitionタグを使ってアニメーションを実装するケースを見ていきたいと思います。

 

transitionタグで要素にトランジション効果を加える

このtransitionタグですが、対象の要素を内包するように記述することで専用のclass名がトランジションの経過に合わせて動的に付与される仕組みになります。ただし、DOMの再描画が行われるタイミングでしか機能しないので注意が必要です。今回はサンプルとしてボタンのクリックで要素の表示と非表示が切り替わるような例で見ていきます。

【Vue】

<template>
 <div id="app">
  <button v-on:click="display_switch()">click!!</button>
  <div>ボタンクリックで表示・非表示が切り替わる要素です
  </div>
 </div>
</template>

<script>
 export default {
  data: function() {
   return {
    show: false
   }
  },
  methods: {
   display_switch: function() {
    this.show = !this.show
   }
  }
 }
</script>

 

実装も簡単で、先ほどの通りアニメーションさせたい要素をtransitionタグで囲むだけでOKです。その後CSSなどでトランジション効果のスタイルを指定します。

【Vue】

<template>
 <div id="app">
  <button v-on:click="display_switch()">click!!</button>
  
  <transition>

   <div>ボタンクリックで表示・非表示が切り替わる要素です
   </div>

  </transition>
 
 </div>
</template>

<script>
..... 省略
</script>

<style lang="scss">
 .v-enter-active {
  transition: all 1.0s ease 0s;
 }
 .v-leave-active {
  transition: all 0.3s ease 0s;
 }
 .v-leave-active {
  position: absolute;
 }
 .v-enter,
 .v-leave-to {
  opacity: 0;
 }
 .v-enter {
  transform: translateX(-60px);
 }
 .v-enter-to,
 .v-leave {
  transform: translateX(0);
 }
 .v-leave-to {
  transform: translateX(60px);
 }
</style>

 

実際に動くサンプルを用意しましたので見てみましょう。いかがでしょうか、こうして比べてみると違いがよくわかりますね。

 

See the Pen
Vue.js transition sample
by designsupply (@designsupply)
on CodePen.

先ほどCSSでスタイルを指定するとありましたが、トランジションの経過に合わせたclass名が自動で付与されますので、class名を把握しておく必要があります。下記にトランジション時に使われるclass名をまとめていますので、これらに合わせてスタイルを指定していきます。

 

v-enter-active 要素が表示される間の状態で付与されるclass
(要素のDOMへ追加〜Enterトランジションの実行)
v-enter 要素がDOMに追加される直前からEnterトランジションが始まるまでの間に付与されるclass
v-enter-to Enterトランジションが始まり要素がDOMから削除されるまでの間に付与されるclass
v-leave-active 要素が削除される間の状態で付与されるclass
(Leaveトランジションの実行〜要素のDOMから削除)
v-leave Leaveトランジションが始まる直前までの間に付与されるclass
v-leave-to Leaveトランジションが始まり終了するまでの間に付与されるclass

 

 

transitionタグのオプションでトランジションのタイミングを調整

トランジション効果でアニメーションを実装できるtransitionタグですが、トランジションのタイミングも指定することができます。デフォルトではEnterのトランジションとLeaveのトランジションが同時に始まりますが「mode」属性でオプションを指定することで変更が可能です。

【Vue】※一部抜粋

<transition mode="in-out">
</transition>

 

mode属性で使えるオプションは下記のものが用意されています。指定しない場合にはデフォルトの仕様が適用されます。

 

(デフォルト) EnterのトランジションとLeaveのトランジションが同時に実行される
in-out Enterのトランジションの終了後にLeaveのトランジションを実行する
out-in Leaveのトランジションの終了後にEnterのトランジションを実行する

 

 

ループで複数の要素を出力している要素へのトランジション

v-forなどで複数要素がループで出力されている要素に対しては「transition-group」タグを使います。ただし下記の点に注意しておきましょう。

・デフォルトでラッパー要素がspanになるので、指定のタグがある場合にはtag属性にて設定する。
・v-forで展開する要素にはkey属性の指定が必須となる

 

実際のコードの例は次のようになります。これでループで動的に出力された要素に対しても全てトランジションが適用されるようになりました。

【Vue】※一部省略

<template>
 <div id="app">
  <transition-group tag="ul">
   <li v-for="item of items" v-bind:key="item.id">{{ item.name }}
   </li>
  <transition-group>
 </div>
</template>

 


 

いかがでしょうか、Vue.jsでは動的にコンテンツやデータ、要素などが切り替わるためUIの観点からもアニメーションが求められるケースも多いかと思います。そんな時にはこのtransitionタグがとても便利ですね。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】