https://www.jianshu.com/p/55305c53de13

transition动画钩子初识：

 <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>