Ric*_*ett 17 javascript animation vue.js
我希望使用VueJs为数字更改设置动画.
例如,我有:
{{ number }}
然后number从改变0到100,我希望元素计数100而不是直接跳到它.
如果不使用除VueJs之外的任何第三方(纯Js/VueJs),我该如何做到这一点？
Jef*_*eff 30
这是一个自定义组件: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',
});
我意识到这是一个较旧的帖子,但我正在寻找类似的东西,我直接从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/vue@2.4.3/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>我希望有所帮助!蒂姆
| 归档时间： |
|
| 查看次数： |
10615 次 |
| 最近记录： |