概要
数字がだんだん増える演出をVue.jsとAnime.jsを使用してつくった。
See the Pen Vue.js Count Animation by T_Y (@ymnk) on CodePen.
説明
Anime.jsを使えば、オブジェクトの値に対してアニメーションをつけることができる。
https://animejs.com/documentation/#JSobject
Vue.jsでは実際の数値データ(num)と表示用の数値データ(count)を設定した。
変化の流れは以下の感じで。
1.numが変化
2.numをwatchで監視
3.countをアニメーション
filterでカンマの有無を切り替えたのはおまけ。