乐趣区

关于前端:Vue2-Transition过渡动画的使用2使用JavaScript钩子函数实现动画

jiezi

三、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>
退出移动版