vue的JS动画——动画钩子
2021-06-04 19:04
标签：rip handle his data 动画 vue tps timeout UNC https://www.jianshu.com/p/55305c53de13 transition动画钩子初识： vue的JS动画——动画钩子 标签：rip handle his data 动画 vue tps timeout UNC 原文地址：https://www.cnblogs.com/em2464/p/12337910.html div id="root">
transition name=‘fade‘
@before-enter=‘handleBeforeEnter‘
@enter=‘handleEnter‘
@after-enter=‘handleAfterEnter‘
>
h1 v-show=‘show‘>
最是年少时模样
h1>
transition>
button @click=‘change‘>切换button>
div>
script>
var vm=new Vue({
el:‘#root‘,
data:{
show:true
},
methods:{
change:function(){
this.show=!this.show;
},
handleBeforeEnter:function(el){
console.log(‘before‘);
el.style.color=‘red‘
},
handleEnter:function(el,done){
console.log(‘enter‘);
setTimeout(()=>{
el.style.color=‘green‘
},2000)
setTimeout(()=>{
done();
},4000)
},
handleAfterEnter:function(el){
console.log(‘after‘);
el.style.color=‘#000000‘
}
}
})
script>
下一篇：js发展历史与基础