vue动画的封装 

<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和动画钩子实现

posted @ 2020-02-21 21:34  聂小恶  阅读(189)  评论(0)  编辑  收藏  举报