Vueの公式ガイドにある数字を変更すると、
数字がクルクルするアニメーションを使ってみたので、その時の備忘録。

Vueすごい。。TweenLiteすごい。。

おぉ数字がクルクルするアニメーションできた(*´ω｀*)
Vueすげー TweenLiteすげーってなってる(*´ω｀*) pic.twitter.com/lU0hbyi7WW
— きらぷか@i18n補助ツール『トランスノート』開発者 (@kira_puka) June 8, 2019

TweenLiteのインストール

npm install gsap
// or
npm install gsap @types/gsap

コンポーネント

基本は、

watchで対象の数字を監視して、
変更があったら、TweenLiteを経由して変更
経由させるために、経由用のdata変数とcomputedの関数が使う

っぽい。

<template>
  <span>{{ animatedNum }}</span>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "nuxt-property-decorator";
import TweenLite from 'gsap/TweenLite'; // 個別インポートで容量削減

@Component
export default class AnimNum extends Vue {
  @Prop({ default: 0 }) num!: number; // 渡されてくる値

  private tweenedNum: number = this.num; // 経由用のdata変数
  // ****************************************************
  // * computed
  // ****************************************************
  private get animatedNum() {
    // ここで表示用の値を渡す
    return this.tweenedNum.toFixed(0).toLocaleString();
  }

  // ****************************************************
  // * watch
  // ****************************************************
  @Watch("num")
  private onPriceChanged(val: number, oldVal: number) {
    // 渡されてくる値を監視して、TweenLiteを使ってdata変数に代入
    TweenLite.to(this.$data, 0.8, { tweenedNum: val });
  }
}
</script>