可复用的过渡

过渡可以通过 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. })