Vue路由器页面动画和过渡不起作用

Question

嗨，我的 vue 3 项目路由页面动画和过渡不起作用

    <template>
  <app-header />

  <router-view v-slot="{ Component }" :key="$route.fullPath">
    <transition name="fade" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>

  <app-foother />
  <div v-on:click="pageTop()" class="downUpArrow">
    <i class="fas fa-chevron-up"></i>
  </div>
</template>

我的路由器链接头组件不是我添加的路由器链接添加不起作用的转换

Answer 1

<template>
  <div id="nav">
    <!-- routes -->
  </div>
  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<style>
/* ... */

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

Repo