只有 7 KB！前端圈疯传的 Vue3 转场动效神库！效果炸裂！
“只要 7 KB，就能把多页站变成丝滑 SPA！”——这句话在前端圈疯传的神库，就是 Barba.js。
今天，我们就把它和 Vue3 搭配，手把手带你做出**“效果炸裂”**的页面切换动效！
为什么是 Barba.js × Vue3？
- 天生轻量：
gzip后仅7 KB，0 依赖，对Vue3的bundle体积几乎没影响。 - 渐进增强：不改现有路由，只要把需要动效的部分包一层
data-barba="container"，老项目也能无痛升级。 - 动画自由：官方只负责“切换生命周期”，真正的视觉冲击可以交给
GSAP、Anime.js或Vue3的<Transition>组件。 - 社区炸裂：GitHub
1.2 w+star，大量 Vue3 样板可直接抄作业。
30 秒极速上手
1.安装
npm i @barba/core @barba/css # 核心 + 零 JS 动画辅助
npm i gsap # 想玩高级动效再装
2.HTML 骨架（Vue3 单页或多页皆可）
<body data-barba="wrapper">
<header>公共头部</header>
<!-- Vue3 挂载点，也是 Barba 需要替换的区域 -->
<main id="app"
data-barba="container"
data-barba-namespace="home">
<!-- 这里放 <RouterView/> 或直接放组件 -->
</main>
<footer>公共底部</footer>
</body>
3.初始化（main.ts）
import barba from '@barba/core'
import barbaCss from '@barba/css'
import gsap from 'gsap'
barba.use(barbaCss) // 先让 Barba 帮你加/删 class
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'
})
}
}]
})
⚠️ 注意：
- 每次切换完成后，手动重新挂载 Vue3 实例（如果使用多页模式），或让组件复用
<keep-alive>。- Barba 会帮你更新浏览器
history，SEO不受影响。
实战：3 个效果炸裂的技巧
视差 + 蒙版过渡
在 leave 钩子用 GSAP 把旧页面做 clip-path 收缩，新页面做 视差滑动，视觉冲击直接拉满。
路由级差异化动效
利用 @barba/router 给 /home → /about 用 淡入淡出，给 /portfolio/* → /portfolio/* 用 3D 翻转，保持品牌调性一致。
鼠标悬停预加载
打开 @barba/prefetch，用户还没点击就把下一页提前拉回来，真正“秒开”体验。
常见踩坑 & 解决方案
🔴 场景 1：首屏闪白
症状：刷新后能看到瞬间白屏，然后内容才出现。
快速解法：
- 给
<body data-barba="wrapper">先加style="opacity:0"。 - 在
barba.init里写一次性的once过渡：
once({ next }) {
gsap.fromTo(next.container,
{ opacity: 0 },
{ opacity: 1, duration: 0.4, onComplete: () => document.body.style.opacity = 1 }
)
}
🔴 场景 2：Vue3 组件不销毁，内存暴涨
症状：来回切换页面后，控制台出现 [Vue warn]: Component is already mounted。
快速解法：
在 afterEnter 里手动卸载并重新挂载：
afterEnter({ next }) {
app?.unmount()
app = createApp(App)
app.mount('#app')
}
🔴 场景 3：滚动位置错乱
症状：A 页面滚到 800 px，跳转到 B 页面却直接回到顶部。
快速解法：
barba.hooks.beforeLeave(() => {
history.replaceState({ ...history.state, scrollY: window.scrollY }, '')
})
barba.hooks.afterEnter(() => {
const { scrollY = 0 } = history.state || {}
window.scrollTo({ top: scrollY, behavior: 'smooth' })
})
🔴 场景 4：点击浏览器后退，页面样式瞬间全乱
症状：后退时 Barba 把缓存的 DOM 直接塞回，但 Vue3 样式作用域失效。
快速解法：
给 <style scoped> 再补一个全局补丁：
/* barba 会把 container 整个替换，scoped 样式会丢 */
.barba-container[data-namespace="home"] .hero {
/* 重写一次关键样式 */
}
🔴 场景 5：移动端首次滑动卡顿
症状：iOS Safari 第一次滑屏有 300 ms 延迟。
快速解法：
在 barba.init 里关闭预加载的 timeout：
barba.init({
timeout: 0, // 不等待 requestIdleCallback
})
写在最后
Barba.js 并不是一个“Vue3 专用”的库，但正是这种 框架无关 的特性，让它在 Vue3 项目里反而更自由：
- 你可以继续用
Vue Router做SPA； - 也可以把多页站改造成
“伪 SPA”，却保留SSR的SEO优势。
一句话：如果你受够了页面跳转的“闪白”，又不想折腾整站改造成 SPA，Barba.js + Vue3 就是目前性价比最高的动效解！
- Barba.js 官网：
https://barba.js.org/ - Barba.js Github：
https://github.com/barbajs/barba
来源：juejin.cn/post/7532287059374506027
