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