<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue中的js动画和velocity.js</title>
<script src="vue.js"></script>
<script src="velocity.js"></script>
</head>
<body>
<div id="app">
<!-- 使用vue的js钩子结合velocity.js实现一个透明度渐变的效果 -->
<!-- 1：定义js钩子函数 -->
<transition
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
>
<div v-if="show">hello world</div>
</transition>
<button type="button" @click="handleBtn">出现/隐藏</button>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
show:true
},
/* 2：实现钩子函数 */
methods:{
handleBtn:function(){
this.show=!this.show
},
handleBeforeEnter:function(el){
/* el.style.color="red"进入前颜色变为红色 */
el.style.opacity=0;/* 进入之前透明度为0 */
},
handleEnter:function(el,done){
/* setTimeout(()=>{
el.style.color="green"
},2000)进入后两秒变为绿色
setTimeout(()=>{
done()
},4000) 四秒后动画结束*/
/* 3：使用velocity.js让动画执行1S然后透明度变为1 */
Velocity(el,{
opacity:1
},{
duration:1000,/* 动画执行1S */
complete:done
})
},
handleAfterEnter:function(el){
/* el.style.color="black"动画完成后变为黑色 */
alert('handleAfterEnter')
}
}
})
</script>
</body>
</html>
