目录
一、动画钩子函数
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>