vue 路由跳转 左侧划入

作者: wxfeng 分类: web前端 发布时间: 2020-09-30 18:35

1、将切换的页面用transition包裹

<div class="index-content">
     <transition>
           <router-view/>
     </transition>
</div>

2、css设置切换动画

.index-content{
        width: 100%;
        //解决出现横向滚动条问题
        overflow-x: hidden;
    }
    .v-enter{
        opacity: 0;
        transform: translateX(100%);
    }
    .v-leave-to{
        opacity: 0;
        transform: translateX(-100%);
        // 解决页面从上往下位移问题
        position: absolute;
    }
    .v-enter-active,.v-leave-active{
        transition: all .5s ease;
    }

完工

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注