• 可复用的过渡

    可复用的过渡

    过渡可以通过 Vue 的组件系统实现复用。要创建一个可复用过渡组件，你需要做的就是将 <transition> 或者 <transition-group> 作为根组件，然后将任何子组件放置在其中就可以了。

    使用 template 的简单例子：

    1. Vue.component('my-special-transition', {
    2.   template: '\
    3.     <transition\
    4.       name="very-special-transition"\
    5.       mode="out-in"\
    6.       v-on:before-enter="beforeEnter"\
    7.       v-on:after-enter="afterEnter"\
    8.     >\
    9.       <slot></slot>\
    10.     </transition>\
    11.   ',
    12.   methods: {
    13.     beforeEnter: function (el) {
    14.       // ...
    15.     },
    16.     afterEnter: function (el) {
    17.       // ...
    18.     }
    19.   }
    20. })

    函数式组件更适合完成这个任务：

    1. Vue.component('my-special-transition', {
    2.   functional: true,
    3.   render: function (createElement, context) {
    4.     var data = {
    5.       props: {
    6.         name: 'very-special-transition',
    7.         mode: 'out-in'
    8.       },
    9.       on: {
    10.         beforeEnter: function (el) {
    11.           // ...
    12.         },
    13.         afterEnter: function (el) {
    14.           // ...
    15.         }
    16.       }
    17.     }
    18.     return createElement('transition', data, context.children)
    19.   }
    20. })