Vue.js + webpack で 数字をドラムロールする

#はじめに

数字をドラムロールするアニメーションはすでに、Vue.jsのドキュメント にあるけど、これをwebpackで使いたい。
あと、フォームに入力してカウントアップするやり方ではなく、ボタンを押したら10ずつ増えるという簡単なコードを書きました。

HTMLを書く

ボタンと数字を表示する

<div id="app">
  <button v-on:click="countup">
    10ずつカウントアップ
  </button>

  <p>{{ animatedNumber }}</p>
</div>

GSAPをインストール

GSAPのTweenLiteを使うため、GSAPをwebpackにインストールします。

npm install gsap

#コードを書きます。

import Vue from 'vue'
import TweenLite from 'gsap' // GSAPのTweenLiteを使います。

new Vue({
  el: '#app',
  data: {
    tweenedNumber: 0
  },
  computed: {
    animatedNumber: function() {
      return this.tweenedNumber.toFixed(0) //小数点を削除するため toFixedを使用
    }
  },
  methods: {
    countup: function() {
      const newValue = this.tweenedNumber + 10
      TweenLite.to(this.$data, 0.5, { tweenedNumber: newValue })
    }
  }
})

といった感じです。
これができると色々応用がきくと思います。
わたしは、検索結果の件数をリアルタイムで出す際にこれを使ってます。