Vue08---js动画与Velocity.js结合

 

目录

一、动画钩子函数

 二、Velocity.js介绍及使用

---

一、动画钩子函数

transition有以下钩子函数

1、before-enter(el)：动画进入之前的钩子函数，默认带一个参数，为transition包裹的这个元素对象

2、enter(el,done)：动画执行中的函数,done为回调函数，需手动调用（必须调用），代表动画结束。

3、after-enter(el)：done函数回调完代表动画执行完毕，开始调用此钩子函数。

与之对应的有动画离开的钩子函数：before-leave，leave，after-leave

以下例子为，动画进入时字体为红色，2s后变成绿色，动画执行完，按调用done回调函数为动画执行完毕标志，再2s之后变成黑色

<template>
  <div>
    <transition
      name="fade"
      @before-enter="handleBeforeEnter"
      @enter="handleEnter"
      @after-enter="handleAfterEnter"
    >
      <div v-show="show">Hello world</div>
    </transition>
    <button @click="handleClick">toggle</button>
  </div>
</template>

<script>
export default {
  name: 'velocity',
  data () {
    return {
      show: true
    }
  },
  methods: {
    handleClick () {
      this.show = !this.show
    },
    handleBeforeEnter (el) {
      // el代表的是transition包裹的这个元素
      el.style.color = 'red'
    },
    handleEnter (el, done) {
      // done为回调函数
      setTimeout(() => {
        el.style.color = 'green'
      }, 2000)
      setTimeout(() => {
        done()
        // enter事件已经执行完
      }, 4000)
    },
    handleAfterEnter (el) {
      el.style.color = '#000'
      console.log('动画结束')
    }
  }
}
</script>

 效果：

 二、Velocity.js介绍及使用

Velocity.js是一个功能强大的库，它的动画涵盖：

• CSS动画属性的数值，包括颜色

• Transform（变换）

• SVG属性

• 滚动事件，相对于页面或页面中的容器元素

• 淡入淡出动画

本文只做简单使用概述，更多属性请详见文档Velocity.js 中文文档，英文官网：Velocity.js

下载链接：http://shouce.jb51.net/velocity/velocity.min.js

 以下为velocity与vue简单结合的例子

//npm安装
npm install velocity-animate

//main.js里引入

import Velocity from 'velocity-animate'

<template>
  <div>
    <transition
      name="fade"
      @before-enter="handleBeforeEnter"
      @enter="handleEnter"
      @after-enter="handleAfterEnter"
    >
      <div v-show="show">Hello world</div>
    </transition>
    <button @click="handleClick">toggle</button>
  </div>
</template>

<script>
export default {
  name: 'velocity',
  data () {
    return {
      show: true
    }
  },
  methods: {
    handleClick () {
      this.show = !this.show
    },
    handleBeforeEnter (el) {
      el.style.opacity = 0
    },
    handleEnter (el, done) {
      Velocity(el, { opacity: 1 },
        {
          duration: 1000,
          complete: done
        })
      // complete属性的意思是，当velocity这个动画执行完毕之后complete对应的内容会被自动执行
    },
    handleAfterEnter (el) {
      console.log('动画结束')
    }
  }
}
</script>