VueJsを使用して番号の変更をアニメーション化することを検討しています。VueJs - アニメーション番号の変更
例えば、私が持っている：0から100へ
{{ number }}
その後number変更を、私はむしろそれにstrightをジャンプよりも100にカウントアップする要素をしたいと思います。
VueJsを除く第三者（純粋なJs/VueJs）を使用せずにこれを行うにはどうすればよいですか？
は、カスタムコンポーネントとして、この作業を手に入れた：https://jsfiddle.net/5nobcLq0/5/
HTML
<body>
<input v-model="number">
<animated-number :number="number"></animated-number>
</body>
JS
Vue.component('animated-number',{
template:"{{displayNumber}}",
props:{'number':{default:0}},
data: function(){
return {
displayNumber:0,
interval:false
}
},
ready:function(){
this.displayNumber = this.number ? this.number : 0;
},
watch:{
number: function(){
clearInterval(this.interval);
if(this.number == this.displayNumber){
return;
}
this.interval = window.setInterval(function(){
if(this.displayNumber != this.number){
var change = (this.number - this.displayNumber)/10;
change = change >= 0 ? Math.ceil(change) : Math.floor(change);
this.displayNumber = this.displayNumber + change;
}
}.bind(this), 20);
}
}
})
new Vue({
el:'body',
});
ありがとう、これは私が探していたものです！ – user3662307
これを小数点をサポートするように調整できますか？現在のところ、数字が全体ではない場合は、それはちらつき、 – user3662307
の行 'change = change> = 0？ Math.filor（変更）：Math.floor（変更）; 'Math.floor'と' Math.ceil'を使って変更を取り消します。その行を削除すればうまくいくはずです。代わりに、特定の数の小数点以下を丸めることができます。 – Jeff
を、私はこれは古い記事で実現するが、私が探していました同様のもので、vue.js 2.0のドキュメントの例をまっすぐに見つけました。あなたはここにそれを見つけることができます：https://vuejs.org/v2/guide/transitioning-state.html#Organizing-Transitions-into-Components
私は以下のスニペットで再作成しました。私はそれが役に立てば幸い
// This complex tweening logic can now be reused between
// any integers we may wish to animate in our application.
// Components also offer a clean interface for configuring
// more dynamic transitions and complex transition
// strategies.
Vue.component('animated-integer', {
template: '<span>{{ tweeningValue }}</span>',
props: {
value: {
type: Number,
required: true
}
},
data: function() {
return {
tweeningValue: 0
}
},
watch: {
value: function(newValue, oldValue) {
this.tween(oldValue, newValue)
}
},
mounted: function() {
this.tween(0, this.value)
},
methods: {
tween: function(startValue, endValue) {
var vm = this
function animate() {
if (TWEEN.update()) {
requestAnimationFrame(animate)
}
}
new TWEEN.Tween({
tweeningValue: startValue
})
.to({
tweeningValue: endValue
}, 500)
.onUpdate(function() {
vm.tweeningValue = this.tweeningValue.toFixed(0)
})
.start()
animate()
}
}
})
// All complexity has now been removed from the main Vue instance!
new Vue({
el: '#example-8',
data: {
firstNumber: 20,
secondNumber: 40
},
computed: {
result: function() {
return this.firstNumber + this.secondNumber
}
}
})<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tween.js"></script>
<div id="example-8">
<input v-model.number="firstNumber" type="number" step="20"> +
<input v-model.number="secondNumber" type="number" step="20"> = {{ result }}
<p>
<animated-integer v-bind:value="firstNumber"></animated-integer> +
<animated-integer v-bind:value="secondNumber"></animated-integer> =
<animated-integer v-bind:value="result"></animated-integer>
</p>
</div>！ Tim
これはVueJs domアップデートプロセスに組み込まれているので、requestAnimationFrameではなく$ nextTickを使うことをお勧めします。 – BenjaminEllis
こんにちは@BenjaminEllis、私はvue.js 2.xのドキュメントからサンプルをコピーしました。だから、requestAnimationFrameを使用する理由があるかもしれません。それ以外の場合は、例で使用したと思いますか？ – Tim
私はそれに答えるようになったが、私は夜に向かった。ここで私が取り組んでいるものは次のとおりです：https://jsfiddle.net/5nobcLq0/1/基本的に、考えられるのは、表示された番号とは別の番号を保持し、それが違う場合は、表示番号を実数に向かって増やします。私は理想的には、これが独自のコンポーネント、あるいは 'v-animate'のような指示になると思っています。私は明日それをもっと見るでしょう – Jeff
私はv-animateを見ましたが、助けになるものは何も見つかりません – user3662307