标签：fun hand and timeout var script for methods out
<body> <div id="root"> <fade :show=‘show‘> <h1>hello world</h1> </fade> <button @click=‘handleBtnClick‘>tooggle</button> </div> <script> Vue.component(‘fade‘,{ props:[‘show‘], template:` <transition @before-enter=‘handleBeforeEnter‘ @enter=‘handleEnter‘> <slot v-if=‘show‘></slot> </transition> `, methods:{ handleBeforeEnter:function(el){ el.style.color=‘red‘ }, handleEnter:function(el,done){ setTimeout(()=>{ el.style.color=‘green‘; done(); },2000) } } }) var vm=new Vue({ el:‘#root‘, data:{ show:true }, methods:{ handleBtnClick:function(){ this.show=!this.show; } } }) </script> </body>
借助插槽slot和动画钩子实现
标签：fun hand and timeout var script for methods out
原文地址：https://www.cnblogs.com/em2464/p/12343232.html
