• 动态过渡

    动态过渡

    在 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 来动态修改之前的过渡。一句老话，唯一的限制是你的想象力。