vue 页面切换从右侧切入效果

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

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

 

二、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;
    }

3.完工。