三、JavaScript 钩子

1，根本介绍
  咱们能够在 transition 属性中申明 JavaScript 钩子，这些钩子函数能够联合 CSS transitions/animations 应用，也能够独自应用。

留神：当只用 JavaScript 过渡时，在 enter 和 leave 中必须应用 done 进行回调。否则，它们将被同步调用，过渡会立刻实现。举荐对于仅应用 JavaScript 过渡的元素增加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也能够防止过渡过程中 CSS 的影响。
<template>  <div id="app">    <button @click="show = !show">显示/暗藏</button>    <br>    <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">      <img v-show="show" src="./assets/logo.png">    </transition>  </div></template> <script>export default {  name: 'App',  data: function(){    return {      show: true    }  },  methods: {    // --------    // 过渡进入中    // --------    // 设置过渡进入之前的组件状态    beforeEnter: function (el) {      // ...    },    // 设置过渡进入实现时的组件状态    enter: function (el, done) {      // ...      done()    },    // 设置过渡进入实现之后的组件状态    afterEnter: function (el) {      // ...    },    enterCancelled: function (el) {      // ...    },     // --------    // 过渡来到时    // --------    // 设置过渡来到之前的组件状态    beforeLeave: function (el) {      // ...    },    // 设置过渡来到实现时地组件状态    leave: function (el, done) {      // ...      done()    },    // 设置过渡来到实现之后的组件状态    afterLeave: function (el) {      // ...    },    // leaveCancelled 只用于 v-show 中    leaveCancelled: function (el) {      // ...    }  }}</script>

2，应用样例
（1）效果图

  • 通过点击按钮对下方图片进行显示或暗藏（交替）。
  • 图片在显示或暗藏的过程中，会有淡入淡出的成果。只不过这个成果不再是通过 CSS 实现，而是在钩子函数中借助 Velocity.js 来实现。

（2）样例代码

Velocity 库能够在我的项目中运行如下命令进行装置：npm install velocity-animate --save-dev
<template>  <div id="app">    <button @click="show = !show">显示/暗藏</button>    <br>    <transition      v-on:before-enter="beforeEnter"      v-on:enter="enter"      v-on:leave="leave"      v-bind:css="false">      <img v-show="show" src="./assets/logo.png">    </transition>  </div></template> <script>import  Velocity from 'velocity-animate' export default {  name: 'App',  data: function(){    return {      show: true    }  },  methods: {    beforeEnter: function (el) {      el.style.opacity = 0    },    enter: function (el, done) {      Velocity(el, {        rotateZ: '0deg',        translateY: '0px',        translateX: '0px',        opacity: 1      }, { complete: done })    },    leave: function (el, done) {      Velocity(el, {        rotateZ: '45deg',        translateY: '30px',        translateX: '30px',        opacity: 0      }, { complete: done })    }  }}</script>
附：初始渲染的过渡

  对于初始渲染的过渡，同样有提供相应的钩子函数。咱们能够在这些钩子函数中实现相应的动画。

<transition  appear  v-on:before-appear="customBeforeAppearHook"  v-on:appear="customAppearHook"  v-on:after-appear="customAfterAppearHook"  v-on:appear-cancelled="customAppearCancelledHook">  <!-- ... --></transition>