簡単にtransitionのアニメーションを付ける「vue2-animate」

vue2-animateとは

「vue2-animate」は、Vueの内蔵transitionにAnimate.cssを適用させてアニメーションを実装するライブラリです。

アニメーションの種類は、Bounce、Fade、Rotate、Slide、Zoomで28種類あります。

インストール

以下のnpm、yarn、CDNを使ってインストールします。

npm

npm install --save vue2-animate

yarn

yarn add vue2-animate

CDN

<link rel="stylesheet" href="https://unpkg.com/vue2-animate/dist/vue2-animate.min.css"/>

gitリポジトリは以下から取得できます。

https://github.com/asika32764/vue2-animate

導入手順

Vueの内蔵transitionにAnimate.cssを適用させてアニメーションを実装します。

1. ライブラリの取り込み

（1）webpack等の場合 ※モジュール版は未検証です。

require('vue2-animate/dist/vue2-animate.min.css')

（2）WEBページの場合

なし

2.transitionアニメーションと配列メソッドを設定

methodsのdoAddで要素を追加、doDeleteで要素を削除

今回はサンプルでtransitionのアニメーションにbounceエフェクトを使用します。

 new Vue({
   el: '#app',
   data: {
    effect: 'bounce', 
    items:[
      {no:1, name:'キャベツ', categoryNo:'1'},
      {no:2, name:'ステーキ', categoryNo:'2'},
      {no:3, name:'リンゴ', categoryNo:'3'}
    ],
    newNo: 4
   },
  computed: {
    myList: {
      get() {
        return this.items;
      },
      set(value) {
        this.items = value;
      }
    }
  },
  methods: {
    doAdd:function(){
      var self = this;
      var no = 0;         　
      if(self.items.concat().length > 0){
        no =  Math.max.apply(null,self.items.concat().map(function(item){return item.no;})) +1;
        self.newNo = self.newNo < no ? no:self.newNo;
      }
      this.items.push({
        no:　this.newNo,
        name:'追加リスト'+ this.newNo,
        categoryNo:'5'
      });
    },
    doDelete: function(item, index){
      this.items.splice(index, 1);
    }
  }
 })

3. テンプレートを準備

transitionアニメーションを使用したい要素を<transition-group>で囲みます。
nameプロパティにエフェクトを指定します。
tagプロパティにタグ名を設定します。今回はulを設定しています。

<div id="app">
  <button @click="doAdd">追加</button>
  <transition-group :name="effect" tag="ul">
      <li v-for="item, index in myList" :key="item.no">
          {{item.name}}-(No.{{item.no}})
          <span class="del" v-on:click="doDelete(item, index, '')">[削除]</span>
　　　 </li>
  </transition-group>
</div>

サンプル

>>専用ページで確認する

エフェクトの種類

transitionのアニメーションに下記のエフェクトを使用する事ができます。

Bounce

• bounce
• bounceDown
• bounceLeft
• bounceRight
• bounceUp

Fade

• fade
• fadeDown
• fadeDownBig
• fadeLeft
• fadeLeftBig
• fadeRight
• fadeRightBig
• fadeUp
• fadeUpBig

Rotate

• rotate
• rotateDownLeft
• rotateDownRight
• rotateUpLeft
• rotateUpRight

Slide

• slideDown
• slideLeft
• slideRight
• slideUp

Zoom

• zoom
• zoomDown
• zoomLeft
• zoomRight
• zoomUp

まとめ

Vueの内蔵transitionにAnimate.cssを適用させてアニメーションを実装するライブラリでした。

アニメーションを実装するのが思った以上に簡単すぎてビックリしました。

ガチで有能ライブラリなので、これからはバシバシ利用したいと思います。

今日はこの辺でー