在进入/离开的过渡中，会有 6 个 class 切换。动画 - 图1v-enter-active 和 v-leave-active 可以控制进入/离开过渡的不同的缓和曲线

CSS动画

  1. <style>
  2.   .fade-enter-active,
  3.   .fade-leave-active {
  4.     transition: transform 5s;
  5.   }
  7.   .fade-enter,
  8.   .fade-leave-to {
  9.     transform: translate(500px);
  10.   }
  11. </style>
  13. <body>
  14.     <div id="app">
  15.                  <!-- 框架会自动添加对应的fade类 -->
  16.         <transition name="fade">
  17.             <div v-show="flag"></div>
  18.         </transition>
  19.         <button @click="flag=!flag">show</button>
  20.     </div>
  22.     <script type="text/javascript">
  23.         let app = new Vue({
  24.             el: '#app',
  25.             data: {
  26.                 flag: true,
  27.             },
  29.         });
  30.     </script>
  31. </body>

自定义过渡的类名

我们可以通过以下 attribute 来自定义过渡类名：

  • enter-class
  • enter-active-class
  • enter-to-class (2.1.8+)
  • leave-class
  • leave-active-class
  • leave-to-class (2.1.8+)自定义动画 ```html

hello

 

<a name="fniqo"></a>
## [JavaScript 钩子](https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-%E9%92%A9%E5%AD%90)
可以在 attribute 中声明 JavaScript 钩子
```html
<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

// ...
methods: {
  // --------
  // 进入中
  // --------
  beforeEnter: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },
  // --------
  // 离开时
  // --------
  beforeLeave: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。
当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

多个组件过渡