標(biāo)簽包裹

<transition>
    <router-view></router-view>
</transition>

設(shè)置transition動(dòng)畫(huà)

<style scoped>
   .contenBox{
      color: red;
      padding-top: 40px;
      overflow: 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 0.5s ease;
    }
<style >

解釋：

• .contenBox： overflow: hidden; 等帶進(jìn)入的頁(yè)面未萬(wàn)群進(jìn)入之前選擇隱藏，防止出現(xiàn)滾動(dòng)條
• transform: translateX(100%); 頁(yè)面從右邊進(jìn)入，橫向切換，占屏100%適應(yīng)性高
• .v-leave-to
  transform: translateX(-100%); 頁(yè)面左邊消失
  position: absolute; 絕對(duì)占用時(shí)，頁(yè)面切離不占用位置，進(jìn)入的頁(yè)面不會(huì)被擠占位置出現(xiàn)抖動(dòng)