<template>
<div >
<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>
</div>
</template>
<script>
import Vue from 'vue'
import TWEEN from 'tween.js'
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()
}
}
})
export default{
components: {
},
data() {
return {
firstNumber: 20,
secondNumber: 40
}
},
methods:{
},
created(){
},
computed: {
result: function () {
return this.firstNumber + this.secondNumber
}
},
watch: {
}
}
</script>
<style >
.example-7-color-preview {
display: inline-block;
width: 50px;
height: 50px;
}
</style>
Vue官方文档(33):把过渡放到组件里
最新推荐文章于 2024-08-25 09:57:22 发布