vue中封装动画组件(渐隐渐现效果)_v-if可以渐隐吗-CSDN博客

本文链接：https://blog.csdn.net/Uookic/article/details/80281088

项目引用了velocity.js，下载地址 http://velocityjs.org 。本文是个学习笔记

<body>
    <div id="root"> 
          <comp :dis="show">
             <div>hello</div> 
          </comp>
          <comp :dis="show">
             <h1>hello</h1> 
          </comp>
          <button @click="btnclick">toggle</button>
    </div>
    <script> 
       let comp = {//封装的组件
           props:["dis"],
           template:`
            <transition 
                @before-enter="handleBeforeEnter"
                @enter="handleEnter"
                @after-enter="handleAfterEnter"

                @before-leave="handleBeforeLeave"
                @leave="handleLeave"
                @after-leave="handleAfterLeave"
            >
               <slot v-if="dis"></slot>
            </transition>
           `,
           methods:{
            handleBeforeEnter:function(el){
               el.style.opacity = 0;
            },
            handleEnter:function(el,done){
                Velocity(el,{opacity:1},{duration:1000,
                    complate:done 
                })
            },
            handleAfterEnter:function(el){},
            handleBeforeLeave:function(el){},
            handleLeave:function(el,done){
                Velocity(el,{opacity:0},{
                    duration:1000,
                    complate:done //done是必须的,触发之后,才会走下一阶段handleAfterLeave，可以查看http://velocityjs.org/#beginAndComplete
                })
            },
            handleAfterLeave:function(el){
                el.style.opacity = 0;
            }
           }
       }
       var vm = new Vue({
          el:'#root',
          data:{
             show:true
          },
          methods:{
            btnclick:function(){
                this.show = !this.show;
            } 
          },
          components:{
            comp 
          }
      })
    </script>
</body>