一、安装依赖

需要安装animate.css

pnpm i animate.css

二、使用transition添加过渡动画

注意：要想使用动画，需要加:key

<router-view v-slot="{ Component }">
      <Transition
        appear
        enter-active-class="animate__animated animate__fadeInRight"
        leave-active-class="animate__animated animate__fadeOutLeft"
        mode="out-in"
      >
        <div :key="$route.path" class="main-content">
          <component :is="Component"></component>
        </div>
      </Transition>
    </router-view>