Vue

Vue transition实现过渡三个方法

联系站长 作者:web知道,未知,网络大神 来源:未知 2018-10-15 13:33 我要评论

Vue transition实现过渡三个方法...

第一种:自定义样式
      <!-- 如果使用过渡样式添加过渡效果
      1.将你想添加过渡效果的元素使用transition包含
      2.必须为这个transition设置名称,这个名称就是你后期的过渡样式的前缀,意味着后期的样式就是以这个名称做为前缀的 -->
     <style>
            /* 添加过渡样式,这个样式的前缀就是之前transition标签中定义的name */
            //进入
            .slide-enter{
                margin-left: 300px;
            }
            .slide-enter-active{
                transition: margin-left 2s;
            }
            //进入结束
            .slide-enter-to{
                margin-left: 0px
            }
            //离开开始
            .slide-leave{
                margin-left: 0px;
                opacity: 1;
            }
            .slide-leave-active{
                transition: margin-left 2s,opacity 2s;
            }
            //离开结束
            .slide-leave-to{
                margin-left: 300px;
                opacity: 0;
            }
      </style>
      
      //前面样式名,如.slide-leave-to的slide就是来自下面的name名
      <transition name="slide">
                <p v-show='isShow'>我是被控制的元素</p>
      </transition>
 
第二种:使用第三方css库
      //引入animate样式库
      <link rel="stylesheet" href="./css/animate.css">
      //在transition动画标签里写上如下两个样式,一个为放大,一个为放小,由于开始和结束的时间样式库又设好,无需再设置
      <transition
           enter-active-class='animated zoomIn'
           leave-active-class='animated zoomOut'
       >
                <p v-show='isShow'>我是被控制的元素</p>
      </transition>
      
第三种,使用钩子函数实现
      //在transition标签内写入如下事件
      <transition name="slide" v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:before-leave="beforeLeave"
            v-on:leave="leave" v-on:after-leave="afterLeave">
            <p v-show='isShow'>我是被控制的元素</p>
      </transition>
      //methods里写入如下处理条件,根据要求自行修改
      methods: {
          beforeEnter: function (el) {
            el.style.marginLeft = '200px'
          },
          enter: function (el, done) {
          // 在事件中不能直接添加过渡效果
          var left = 200
          var timerid = setInterval(() => {
          left --
          el.style.marginLeft = left + 'px'
          if(left == 0){
          clearInterval(timerid)
          }
          },17)
          // 如果没有调用done函数,那么enter会阻塞后面的afterenter的执行,同时认为过渡动画已经结束,造成afterenter事件不执行
          done()
          },
          afterEnter: function (el) {
          console.log('afterEnter')
          el.style.marginLeft = '0px'
          },
          beforeLeave: function (el) {
          console.log('beforeLeave')
          },
          leave: function (el, done) {
          console.log('leave')
          done()
          },
          afterLeave: function (el) {
          console.log('afterLeave')
          }
          }



本文如有侵犯版权请联系站长删除。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评