• 把过渡放到组件里

    把过渡放到组件里

    管理太多的状态过渡会很快的增加 Vue 实例或者组件的复杂性，幸好很多的动画可以提取到专用的子组件。我们来将之前的示例改写一下：

    1. <script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>
    3. <div id="example-8">
    4.   <input v-model.number="firstNumber" type="number" step="20"> +
    5.   <input v-model.number="secondNumber" type="number" step="20"> =
    6.   {{ result }}
    7.   <p>
    8.     <animated-integer v-bind:value="firstNumber"></animated-integer> +
    9.     <animated-integer v-bind:value="secondNumber"></animated-integer> =
    10.     <animated-integer v-bind:value="result"></animated-integer>
    11.   </p>
    12. </div>
    1. // 这种复杂的补间动画逻辑可以被复用
    2. // 任何整数都可以执行动画
    3. // 组件化使我们的界面十分清晰
    4. // 可以支持更多更复杂的动态过渡
    5. // 策略。
    6. Vue.component('animated-integer', {
    7.   template: '<span>{{ tweeningValue }}</span>',
    8.   props: {
    9.     value: {
    10.       type: Number,
    11.       required: true
    12.     }
    13.   },
    14.   data: function () {
    15.     return {
    16.       tweeningValue: 0
    17.     }
    18.   },
    19.   watch: {
    20.     value: function (newValue, oldValue) {
    21.       this.tween(oldValue, newValue)
    22.     }
    23.   },
    24.   mounted: function () {
    25.     this.tween(0, this.value)
    26.   },
    27.   methods: {
    28.     tween: function (startValue, endValue) {
    29.       var vm = this
    30.       function animate () {
    31.         if (TWEEN.update()) {
    32.           requestAnimationFrame(animate)
    33.         }
    34.       }
    36.       new TWEEN.Tween({ tweeningValue: startValue })
    37.         .to({ tweeningValue: endValue }, 500)
    38.         .onUpdate(function () {
    39.           vm.tweeningValue = this.tweeningValue.toFixed(0)
    40.         })
    41.         .start()
    43.       animate()
    44.     }
    45.   }
    46. })
    48. // 所有的复杂度都已经从 Vue 的主实例中移除！
    49. new Vue({
    50.   el: '#example-8',
    51.   data: {
    52.     firstNumber: 20,
    53.     secondNumber: 40
    54.   },
    55.   computed: {
    56.     result: function () {
    57.       return this.firstNumber + this.secondNumber
    58.     }
    59.   }
    60. })

    把过渡放到组件里 - 图1

    我们能在组件中结合使用这一节讲到各种过渡策略和 Vue 内建的过渡系统。总之，对于完成各种过渡动效几乎没有阻碍。