vue3 页面跳转动画

在Vue 3中，可以使用Vue Router来实现页面之间的跳转，并通过过渡效果来实现页面跳转动画。以下是一个简单的示例：

首先，确保你已经安装了Vue Router：

npm install vue-router@next

然后，在你的Vue应用程序中，创建一个router.js文件，并配置Vue Router：

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('./views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('./views/About.vue')
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

在上面的示例中，我们定义了两个路由：'/'和'/about'，分别对应Home.vue和About.vue组件。

接下来，在你的main.js文件中，导入并使用Vue Router：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App)
  .use(router)
  .mount('#app');

在App.vue组件中，你可以使用Vue的过渡效果来实现页面跳转动画。以下是一个简单的示例：

<template>
  <transition name="fade" mode="out-in">
    <router-view></router-view>
  </transition>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

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

在上面的示例中，我们使用了Vue的transition组件来包裹router-view，并定义了fade的过渡效果类名。通过调整类名对应的样式，你可以实现不同的过渡效果。

这样，当你进行页面跳转时，Vue会自动应用过渡效果来实现页面之间的动画。