Barba.js

Barba.js 是一个开源的 JavaScript 库，用来给普通的多页网站加上页面之间的过渡动画。传统网站点一个链接，浏览器会白屏一下再加载新页面；Barba.js 接管这个过程，在旧页面淡出、新页面淡入之间插入你写的动画，让跳转看起来像单页应用一样连贯。

主要功能

它的核心是拦截站内链接的跳转，异步拉取目标页面内容再替换当前容器，因此页面不会整页刷新。官方把特点归纳为用户友好、简单、智能、可扩展和面向未来，实际使用中你可以用 CSS 或动画库定义进入、离开的时序，配合过渡钩子控制元素先后动起来。

• 拦截站内链接，异步加载目标页面
• 提供进入、离开等生命周期钩子，便于编排动画
• 可与 GSAP 等动画库搭配，也可只用 CSS 过渡

适合谁

适合有一定前端基础、想让作品集、品牌站或营销页跳转更顺滑的开发者。它不提供现成的动画模板，转场效果需要自己写，纯靠复制粘贴拿不到好看的结果。

费用与限制

项目在 GitHub 上开源协作，官网提供文档、示例和常见问题，页面标注版权年份为 2024 年，最近更新于 12 月 2 日。使用前要确认站点结构能配合它的容器替换方式，脚本、样式和第三方组件的重新初始化都需要额外处理。