美文网首页前端常用技术点
vue transition一个元素实现类似轮播图切换的动画效果

vue transition一个元素实现类似轮播图切换的动画效果

作者: 赵小空 | 来源:发表于2019-09-30 16:52 被阅读0次

    使用

    slidename 为变量 值为 slide-left || slide-right
    js中在隐藏时候执行离场动画,在isshow为true时执行入场动画,即可一个元素实现切换动画效果

     <transition :name="slidename">
           <div class="right2" v-show="isshow">
                              
             </div>
      </transition>
    

    css样式

    .slide-left-enter {
        transform: translateX(-100%);
    }
    
    .slide-left-enter-active {
        transition: transform .2s;
    }
    
    .slide-left-enter-to {
        transform: translateX(0);
    }
    
    .slide-left-leave {
        transform: translateX(0);
    }
    
    .slide-left-leave-active {
        transition: transform .5s
    }
    
    .slide-left-leave-to {
        transform: translateX(-100%);
    }
    
    
    
    .slide-right-enter {
        transform: translateX(100%);
    }
    
    .slide-right-enter-active {
        transition: transform .2s;
    }
    
    .slide-right-enter-to {
        transform: translateX(0);
    }
    
    .slide-right-leave {
        transform: translateX(0);
    }
    
    .slide-right-leave-active {
        transition: transform .5s;
    }
    
    .slide-right-leave-to {
        transform: translateX(100%);
    }
    

    相关文章

      网友评论

        本文标题:vue transition一个元素实现类似轮播图切换的动画效果

        本文链接:https://www.haomeiwen.com/subject/rnhhpctx.html