动态过渡

在 Vue 中即使是过渡也是数据驱动的！动态过渡最基本的例子是通过 name 特性来绑定动态值。

  1. <transition v-bind:name="transitionName">
  2.   <!-- ... -->
  3. </transition>

当你想用 Vue 的过渡系统来定义的 CSS 过渡/动画 在不同过渡间切换会非常有用。

所有过渡特性都可以动态绑定，但我们不仅仅只有特性可以利用，还可以通过事件钩子获取上下文中的所有数据，因为事件钩子都是方法。这意味着，根据组件的状态不同，你的 JavaScript 过渡会有不同的表现。

  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
  3. <div id="dynamic-fade-demo" class="demo">
  4.   Fade In: <input type="range" v-model="fadeInDuration" min="0" v-bind:max="maxFadeDuration">
  5.   Fade Out: <input type="range" v-model="fadeOutDuration" min="0" v-bind:max="maxFadeDuration">
  6.   <transition
  7.     v-bind:css="false"
  8.     v-on:before-enter="beforeEnter"
  9.     v-on:enter="enter"
  10.     v-on:leave="leave"
  11.   >
  12.     <p v-if="show">hello</p>
  13.   </transition>
  14.   <button
  15.     v-if="stop"
  16.     v-on:click="stop = false; show = false"
  17.   >Start animating</button>
  18.   <button
  19.     v-else
  20.     v-on:click="stop = true"
  21.   >Stop it!</button>
  22. </div>
  1. new Vue({
  2.   el: '#dynamic-fade-demo',
  3.   data: {
  4.     show: true,
  5.     fadeInDuration: 1000,
  6.     fadeOutDuration: 1000,
  7.     maxFadeDuration: 1500,
  8.     stop: true
  9.   },
  10.   mounted: function () {
  11.     this.show = false
  12.   },
  13.   methods: {
  14.     beforeEnter: function (el) {
  15.       el.style.opacity = 0
  16.     },
  17.     enter: function (el, done) {
  18.       var vm = this
  19.       Velocity(el,
  20.         { opacity: 1 },
  21.         {
  22.           duration: this.fadeInDuration,
  23.           complete: function () {
  24.             done()
  25.             if (!vm.stop) vm.show = false
  26.           }
  27.         }
  28.       )
  29.     },
  30.     leave: function (el, done) {
  31.       var vm = this
  32.       Velocity(el,
  33.         { opacity: 0 },
  34.         {
  35.           duration: this.fadeOutDuration,
  36.           complete: function () {
  37.             done()
  38.             vm.show = true
  39.           }
  40.         }
  41.       )
  42.     }
  43.   }
  44. })

动态过渡 - 图1

最后，创建动态过渡的最终方案是组件通过接受 props 来动态修改之前的过渡。一句老话，唯一的限制是你的想象力。