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.完工。