vue动画的封装

Posted 2021-03-08 em2464

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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和动画钩子实现

以上是关于vue动画的封装的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段14——Vue的axios网络请求封装

回归 | js实用代码片段的封装与总结（持续更新中...）