はじめに
公式ドキュメントで紹介されている TweenMax を使用した方法はライセンスの関係で使用できず
こちらの記事に辿り着いた。
https://qiita.com/y___k/items/22e135b8b8c57ed26fbe
数値A と数値B の合計に対してアニメーションを設定したかったが、ウォッチャ童貞で苦労したので
備忘として残します。
アニメーション処理、使用させていただきました。ありがとうございます。
結果
数値A と数値B への入力時にウォッチャへ登録された関数を実行させる為に keyup で updateSum メソッドを
実行させることで、表面上は実現できた。
（ベストプラクティスがあれば教えていただきたいです）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
</head>
<body>
<div class="container">
<div id="app">
<form>
<div class="form-group">
<label>input1</label>
<input type="text" class="form-control" v-model.number="input1" v-on:keyup="updateSum">
</div>
<div class="form-group">
<label>input2</label>
<input type="text" class="form-control" v-model.number="input2" v-on:keyup="updateSum">
</div>
<div class="form-group">
<label>sum</label>
<input type="text" class="form-control" v-model.number="sumForDisplay" disabled>
</div>
</form>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<script src="https://cdn.jsdelivr.net/npm/animejs@3.1.0/lib/anime.min.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return this.initialState()
},
methods: {
initialState: function () {
return {
input1: 0,
input2: 0,
sum: 0,
sumForDisplay: 0
}
},
updateSum: function () {
this.sum = this.input1 + this.input2;
},
setCount(val) {
const obj = {n: this.sumForDisplay};
anime({
targets: obj,
n: val,
round: 1,
duration: 500,
easing: 'linear',
update: () => {
this.sumForDisplay = obj.n
}
})
}
},
watch: {
sum (newSum, oldSum) {
this.setCount(newSum);
}
}
});
</script>
</body>
</html>