Barba.js 的轻量库，说是“只要 7KB，就能把多页站变成丝滑 SPA”。一开始还有点怀疑，结果真装上试了一下，效果确实有点炸裂。
这篇就和大家聊聊我最近研究的玩法：如何用 Barba.js + Vue3 实现页面动效切换。如果你平时也在用 Vue3 做项目，尤其是那种需要品牌感、转场效果的页面，这篇值得仔细看看。
为什么是 Barba.js + Vue3？
简单说，它有几个对独立开发者特别友好的优点：
极致轻量：gzip 后才 7KB，而且没什么依赖，对 Vue 的打包大小几乎没影响。
无侵入集成：你不需要改 Vue Router，不用改组件结构，动效部分只要加个 data-barba="container" 属性就能生效。
动画自由度高：Barba 负责生命周期控制，动画交给你自己搞，比如用 GSAP、Anime.js，甚至直接用 Vue 的 `` 组件。
社区活跃：GitHub 上有 1.2w+ Star，各种 Vue3 实战项目你都能找到现成的 demo 抄作业。
手把手带你 30 秒极速上手
1. 安装依赖
npm i @barba/core @barba/css # Barba核心和CSS支持
npm i gsap # 如果想要更炫酷的动画
2. 修改 HTML 结构（多页或单页都行）
<body data-barba="wrapper">
<header>头部</header>
<main id="app"
data-barba="container"
data-barba-namespace="home">
<!-- Vue RouterView 或组件 -->
</main>
<footer>底部</footer>
</body>
3. 初始化 Barba（main.ts）
import barba from '@barba/core'
import barbaCss from '@barba/css'
import gsap from 'gsap'
barba.use(barbaCss)
barba.init({
transitions: [{
name: 'cover',
sync: true,
leave({ current }) {
return gsap.to(current.container, {
y: '-100%',
opacity: 0,
duration: 0.6,
ease: 'power2.inOut'
})
},
enter({ next }) {
gsap.from(next.container, {
y: '100%',
opacity: 0,
duration: 0.6,
ease: 'power2.inOut'
})
}
}]
})
⚠️ 注意：如果是多页模式，切换后记得重新挂载 Vue 实例；Barba 会自动处理 history，不影响 SEO。
实战分享：3 个动效玩法
视差 + clip-path 过渡
用 clip-path 给旧页面加个收缩蒙版，新页面再加上视差滑动，效果像做了一套动画片头。
路由级动效差异化
用 @barba/router 给不同路径定制动效，比如 /home → /about 用淡入淡出，/portfolio/* 之间用 3D 翻转，风格立马统一又高级。
鼠标预加载秒开体验
开 @barba/prefetch，用户鼠标刚移上去就偷偷把下一页拉回来，点下去直接“秒开”。
常见问题 & 解决方法
❌ 首屏白屏闪一下？
<body data-barba="wrapper" style="opacity: 0">
并在 once 钩子里补一个过渡让它再淡入。
❌ Vue 组件没销毁、内存飙升？
afterEnter({ next }) {
app?.unmount()
app = createApp(App)
app.mount('#app')
}
❌ 滚动位置混乱？
barba.hooks.beforeLeave(() => {
history.replaceState({ ...history.state, scrollY: window.scrollY }, '')
})
barba.hooks.afterEnter(() => {
const { scrollY = 0 } = history.state || {}
window.scrollTo({ top: scrollY, behavior: 'smooth' })
})
❌ 样式作用域失效？ Barba 替换 DOM 会导致 `` 失效，补一个全局 patch：
.barba-container[data-namespace="home"] .hero {
/* 重写关键样式 */
}
❌ 移动端首次滑动卡顿？
barba.init({
timeout: 0 // 不等 requestIdleCallback，首次交互更快
})
写在最后
Barba.js 并不是专为 Vue3 设计的库，但正是因为它框架无关，反而能非常灵活地融入 Vue3 项目。不管你是做多页站、要保留 SSR，又或者你就是受够了 Router 切换的“白屏 + 抖动”，Barba 都是一个非常值得一试的动效方案。
如果你也在做偏设计感的独立站点，不妨试试这套组合，说不定就能做出像 Apple 一样的转场体验了。