一：vue中使用js动画
根据上一篇安装animate.css之后
vue中有动画的钩子函数，@before-enter是内容由无到有的时候自动监听触发的函数，函数会接收到参数el，这样可以动态设置样式。@enter是@before-enter触发结束后触发。
@enter不同的是会接收到两个参数，参数一为元素el，参数二为done（回调函数）；done函数执行完就会触发@after-enter函数。
出场动画钩子函数@before-leave、@leave、@after-leave同理
<!--vue中使用js动画--> <transition name='fade' @before-enter='handlebeforeEnter' @enter='handleEnter' @after-enter='handleafterEnter'> <p v-show='jsshow'>js动画</p> </transition> <button @click="handlejsClick">切换js动画</button>
<script>
export default{
data(){
return {
}
},
methods:{
handlebeforeEnter(el){
el.style.color='red'
},
handleEnter(el,done){
setTimeout(()=>{
el.style.color='green';
},2000);
setTimeout(()=>{
//这里的done回调函数也比较重要，done函数触发完又会触发@after-ender
done();
},4000)
},
handleafterEnter(el){
el.style.color='#535353'
}
},
}
</script>
二：vue中使用velocity.js
1.首先安装velocity.js
npm install velocity-animate --save-dev
2.在main.js中引入
import Velocity from 'velocity-animate'
3.原理跟上面一样，只是函数的变化方法不一样，这里的 complete: done跟上面的回调函数同理，一定要写，不然不会触发handleafterEnter函数
<template>
<div>
<transition name='fade' @before-enter='handlebeforeEnter' @enter='handleEnter' @after-enter='handleafterEnter'>
<p v-show='jsshow'>js动画</p>
</transition>
<button @click="handlejsClick">切换js动画</button>
</div>
</template>
<script>
export default{
data(){
return {
jsshow:true
}
},
methods:{
handlejsClick(){
this.jsshow=!this.jsshow;
},
handlebeforeEnter(el){
el.style.opacity=0
},
handleEnter(el,done){
console.log("before结束了执行了enter")
Velocity(el,{opacity:1},{duration:3000,complete: done})
},
handleafterEnter(el){
el.style.color='red'
}
},
}
</script>