Vue3 VueRouter 過度動畫

App.vue 默認這樣使用路由 

 <router-view />

使用過度動畫需要改成這樣

  <router-view v-slot="{ Component }">
    <transition 
      enter-active-class="animate__animated animate__fadeIn" 
      leave-active-class="animate__animated animate__fadeOut">
      <component :is="Component" />
    </transition>
  </router-view>

這里是使用了 Vue 提供了 transition 的封裝組件，在下列情形中，可以給任何元素和組件添加進入/離開過渡

• 條件渲染 (使用 v-if)
• 條件展示 (使用 v-show)
• 動態組件　　
• 組件根節點

 

重點，做Router切換動畫，需要用 div 包裹 router-view

div 設置為 position: relative; router-view 設置為 position: absolute;

  <div style="position: relative; height: 100%; width: 100%; perspective: 1200px;">
    <router-view v-slot="{ Component }" style="position: absolute; height: 100%; width: 100%;">
      <transition 
        enter-active-class="animate__animated animate__bounceInRight animate__delay-1s"
        leave-active-class="animate__animated animate__bounceOutLeft">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>

這樣路由頁面切換時，div 標簽內會同時有，當前頁面和 要 切換的頁面，具體F12自己體會

enter-active-class：新頁面進入樣式

leave-active-class：舊頁面退出樣式

這里使用了animate.css動畫庫， 默認進入和退出是同時執行的，我們在進入樣式內添加 animate__delay-1s 延遲1秒執行