vue中封装动画组件(渐隐渐现效果)

项目引用了velocity.js，下载地址 http://velocityjs.org。本文是个学习笔记&amp;lt;body&amp;gt;&amp;lt;div id=&quot;root&quot;&amp;gt;&amp;lt;comp :dis=&quot;

Qin__

3302人浏览 · 2018-05-11 14:43:09

Qin__ · 2018-05-11 14:43:09 发布

项目引用了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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^