用途:Barba.js 用于在多页网站中实现页面间平滑过渡。它拦截站内链接导航,通过 AJAX 获取新页面内容,只替换动态容器,从而减少整页刷新与请求延迟,让多页站点获得类似 SPA 的体验。库体积约 7kb(压缩后),与框架无关,可搭配原生 JS、GSAP、anime.js 等。
主要能力:提供 wrapper、container、namespace 三层 DOM 结构约定;11 个生命周期钩子(如 beforeLeave、leave、afterLeave、beforeEnter、enter、afterEnter)控制过渡各阶段;支持异步与 sync 同步(交叉淡入淡出)两种流程;支持视图(views)按 namespace 执行页面专属逻辑;支持基于 from/to 的过渡规则;可通过 @barba/router 做路由过渡、@barba/prefetch 悬停预取、@barba/head 更新 head 标签。
使用方式:安装 npm install --save-dev @barba/core,在页面中设置 data-barba="wrapper"、data-barba="container"、data-barba-namespace,然后调用 barba.init({ transitions: [...] })。在 leave/enter 中返回 Promise 或使用 async/await,确保动画完成后再切换容器。
适用场景:需要页面切换动画的营销站、作品集、产品页、博客等传统多页网站。
限制与注意:需正确返回 Promise,否则过渡会立即结束;需处理外链排除、页面间 CSS 冲突、标题与 meta 更新、事件监听清理、布局偏移与图片懒加载等问题。具体收费、价格与平台支持资料暂未提供。