Vue.js - Transition过渡动画的使用2（使用JavaScript钩子函数实现动画）

2018-09-11 发布：hangge 阅读：1216

二、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>