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

Vue 路由页面动画和转换不起作用

1 个答案: