把过渡放到组件里

管理太多的状态过渡会很快的增加 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 内建的过渡系统。总之，对于完成各种过渡动效几乎没有阻碍。