vue实现页面平滑切换
使用 Vue Router 实现平滑过渡
Vue Router 内置支持路由过渡效果，通过 <transition> 组件包裹 <router-view> 实现。在 App.vue 中添加以下代码：
<template>
<transition name="fade" mode="out-in">
<router-view />
</transition>
</template>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>mode="out-in" 确保当前页面完全离开后再进入新页面，避免重叠。
自定义过渡动画
通过 CSS 定义更多动画效果，例如滑动过渡：
.slide-enter-active {
transition: transform 0.3s ease-out;
}
.slide-leave-active {
transition: transform 0.3s ease-in;
}
.slide-enter-from {
transform: translateX(100%);
}
.slide-leave-to {
transform: translateX(-100%);
}在模板中指定动画名称：
<transition name="slide" mode="out-in">
<router-view />
</transition>动态过渡效果
根据路由元信息动态切换过渡效果。在路由配置中添加 meta 字段：
const routes = [
{
path: '/',
component: Home,
meta: { transition: 'fade' }
},
{
path: '/about',
component: About,
meta: { transition: 'slide' }
}
];在组件中使用动态绑定：
<template>
<transition :name="$route.meta.transition || 'fade'" mode="out-in">
<router-view />
</transition>
</template>使用 GSAP 实现高级动画
安装 GSAP 库后，结合 Vue 的 JavaScript 钩子实现复杂动画：
<template>
<transition
@enter="enter"
@leave="leave"
:css="false"
>
<router-view />
</transition>
</template>
<script>
import gsap from 'gsap';
export default {
methods: {
enter(el, done) {
gsap.from(el, {
opacity: 0,
x: 100,
duration: 0.5,
onComplete: done
});
},
leave(el, done) {
gsap.to(el, {
opacity: 0,
x: -100,
duration: 0.5,
onComplete: done
});
}
}
};
</script>css: false 禁用内置 CSS 过渡，完全由 JavaScript 控制动画。
页面加载进度条
结合 NProgress 实现路由切换时的进度条反馈：
import NProgress from 'nprogress';
router.beforeEach(() => {
NProgress.start();
});
router.afterEach(() => {
NProgress.done();
});在 main.js 或路由配置文件中添加上述代码，需提前安装 nprogress 包。
优化性能的注意事项
- 避免过度复杂的动画，可能影响低端设备性能。
- 对动画元素使用
will-change: transform属性提升硬件加速。 - 路由组件使用异步加载（懒加载）时，确保动画等待资源加载完成：
const About = () => ({
component: import('./About.vue'),
loading: LoadingComponent, // 自定义加载组件
delay: 200 // 延迟显示加载状态
});
