在Vue 3中,你可以使用<transition>
元素来为路由切换创建页面动画。以下是一个简单的例子:
- 安装并设置Vue Router。
- 定义路由和对应的组件。
- 在布局中添加
<transition>
元素包裹<router-view>
。 - 使用CSS定义过渡效果。
<!-- App.vue -->
<template>
<main>
<transition name="fade" mode="out-in">
<router-view />
</transition>
</main>
</template>
<style>
/* 定义过渡样式 */
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
</style>
// main.js
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';
import Home from './components/Home.vue';
import About from './components/About.vue';
// 路由配置
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
];
const router = createRouter({
history: createWebHistory(),
routes,
});
const app = createApp(App);
app.use(router);
app.mount('#app');
在这个例子中,当路由切换时,<router-view />
会被<transition>
包裹,根据CSS定义的过渡效果进行淡入淡出。你可以根据需要调整.fade-enter-active
和.fade-leave-active
中的CSS属性来改变过渡效果,比如改变持续时间或者动画曲线。