主页

将过渡的内容...

<页脚>©2025 **三个关键要素**： 1. **包装** (`data-barba="wrapper"`) * 最外面的容器 * 包装器内但容器外的所有内容都保持持久 * 非常适合不变的页眉、导航、页脚 2. **容器** (`data-barba="container"`) * 在导航上更新的动态内容区域 * 只有此部分在转换期间被替换 * 必须存在于每个页面上 3. **命名空间** (`data-barba-namespace="home"`) * 每种页面类型的唯一标识符 * 用于转换规则和视图逻辑 * 示例：“主页”、“关于”、“产品”、“博客文章” ### 2\.过渡生命周期 Barba.js 遵循每个导航的精确生命周期： **默认异步流程**： 1. 用户点击链接 2.巴尔巴拦截导航 3. 预取下一页（通过 AJAX） 4. 缓存新内容 5. **离开钩子** \- 动画当前页面移出 6.等待离开动画完成 7. 取出旧容器，插入新容器 8. **输入 hook** \- 为新页面添加动画 9.等待进入动画完成 10.更新浏览器历史记录 **同步流程**（使用 `sync: true`）： 1. 用户点击链接 2.巴尔巴拦截导航 3. 预取下一页 4.等待新页面加载 5. **Leave 和 Enter 挂钩同时运行**（交叉淡入淡出效果） 6. 交换容器 7.更新浏览器历史记录 ### 3\.挂钩 Barba 提供了 11 个生命周期挂钩来控制转换： **挂钩执行顺序** : 初始页面加载：前一次 → 一次 → 后一次每次导航：之前 → 离开之前 → 离开 → 离开之后 → 输入前 → 输入 → 输入后 → 输入后 **挂钩类型**： * **全局钩子**：在每次转换时运行（`barba.hooks.before()`） * **过渡挂钩** ：在特定过渡对象中定义 * **视图挂钩** ：在视图对象中定义用于特定于页面的逻辑 **常见 Hook 用例**： * `beforeLeave` \- 重置滚动位置，准备动画 * `leave` \- 将当前页面动画化 * `afterLeave` \- 清理旧页面 * `beforeEnter` \- 准备新页面（隐藏元素，设置初始状态） * `enter` \- 动画新页面 * `afterEnter` \- 初始化页面脚本，分析跟踪 ### 4\.意见视图是基于命名空间运行的特定于页面的逻辑容器：巴巴.init({ 观点：[{ 命名空间：'家'，之前输入（）{ // 家庭特定设置 console.log('进入首页'); }, 输入后（）{ // 初始化主页功能 initHomeSlider(); } }, { 命名空间：'产品'，之前输入（）{ console.log('进入产品页面'); }, 输入后（）{ initProductGallery(); } }] }); ## 常见模式 ### 1\.基本设置 **安装**： npm install --save-dev @barba/core # 或纱线添加@barba/core --dev **最低配置**：从'@barba/core'导入barba；巴巴.init({ 转换：[{ 名称：'默认'，离开（{当前}）{ // 淡出当前页面返回 gsap.to(当前.container, { 不透明度：0，持续时间：0.5 }); }, 输入（{下一个}）{ // 淡入新页面返回 gsap.from(next.container, { 不透明度：0，持续时间：0.5 }); } }] }); ### 2\.淡入淡出过渡（异步）经典的淡出、淡入过渡：从'@barba/core'导入barba；从“gsap”导入 gsap；巴巴.init({ 转换：[{ 名称：'淡入淡出'，异步离开（{当前}）{ 等待 gsap.to(当前.container, { 不透明度：0，持续时间：0.5，轻松：'power2.inOut' }); }, 异步输入（{下一个}）{ // 开始不可见 gsap.set(next.container, { 不透明度: 0 }); // 淡入等待 gsap.to(next.container, { 不透明度：1，持续时间：0.5，轻松：'power2.inOut' }); } }] }); ### 3\.交叉淡入淡出过渡（同步）页面之间同时淡入淡出：巴巴.init({ 转换：[{ 名称：“交叉淡入淡出”， sync: true, // 启用同步模式离开（{当前}）{ 返回 gsap.to(当前.container, { 不透明度：0，持续时间：0.8，轻松：'power2.inOut' }); }, 输入（{下一个}）{ 返回 gsap.from(next.container, { 不透明度：0，持续时间：0.8，轻松：'power2.inOut' }); } }] }); ### 4\.具有重叠的幻灯片过渡将旧页面滑出，将新页面滑入并重叠：巴巴.init({ 转换：[{ 名称：'幻灯片'，同步：真，离开（{当前}）{ 返回 gsap.to(当前.container, { x: '-100%', 持续时间：0.7，轻松：'power3.inOut' }); }, 输入（{下一个}）{ // 从屏幕右侧开始 gsap.set(next.container, { x: '100%' }); // 从右滑入返回 gsap.to(next.container, { x: '0%', 持续时间：0.7，轻松：'power3.inOut' }); } }] }); ### 5\.转换规则（条件转换）根据导航上下文定义不同的转换：巴巴.init({ 转换：[ // 任意页面的主页：fade { name: 'from-home-fade', 来自: { 命名空间: 'home' }, 离开（{当前}）{ 返回 gsap.to(当前.container, { 不透明度：0，持续时间：0.5 }); }, 输入（{下一个}）{ 返回 gsap.from(next.container, { 不透明度：0，持续时间：0.5 }); } }, // 产品到产品：向左滑动 { name: '产品到产品', 来自：{命名空间：'产品'}，到：{命名空间：'产品'}，离开（{当前}）{ 返回 gsap.to(当前.container, { x: '-100%', 持续时间：0.6 }); }, 输入（{下一个}）{ gsap.set(next.container, { x: '100%' }); 返回 gsap.to(next.container, { x: '0%', 持续时间：0.6 }); } }, // 默认回退 { 名称：'默认'，离开（{当前}）{ 返回 gsap.to(当前.container, { 不透明度：0，持续时间：0.3 }); }, 输入（{下一个}）{ 返回 gsap.from(next.container, { 不透明度：0，持续时间：0.3 }); } } ] }); ### 6\.用于基于路由的转换的路由器插件使用“@barba/router”进行特定于路由的转换： **安装**： npm install --save-dev @barba/router **用法**：从'@barba/core'导入barba；从 '@barba/prefetch' 导入 barbaPrefetch；从“@barba/router”导入 barbaRouter； // 定义路由巴巴路由器.init（{ 路线：[ { 路径: '/', 名称: '家' }, { 路径: '/about', 名称: '关于' }, { path: '/products/:id', name: 'product' }, // 动态段 { 路径: '/blog/:category/:slug', 名称: '博客帖子' } ] }); barba.use(barbaRouter); barba.use(barbaPrefetch); // 可选：悬停时预取巴巴.init({ 转换：[{ name: '产品过渡', to: {route: 'product' }, // 在路由名称上触发离开（{当前}）{ 返回 gsap.to(当前.container, { 标度：0.95，不透明度：0，持续时间：0.5 }); }, 输入（{下一个}）{ 返回 gsap.from(next.container, { 标度：1.05，不透明度：0，持续时间：0.5 }); } }] }); ### 7\.装载指示器在页面获取期间显示加载状态：巴巴.init({ 转换：[{ 异步离开（{当前}）{ // 显示加载器 const loader = document.querySelector('.loader'); gsap.set(loader, { 显示: 'flex', 不透明度: 0 }); gsap.to(loader, { 不透明度: 1, 持续时间: 0.3 }); // 淡出页面等待 gsap.to(当前.container, { 不透明度：0，持续时间：0.5 }); }, 异步输入（{下一个}）{ // 隐藏加载器 const loader = document.querySelector('.loader'); 等待 gsap.to(loader, { 不透明度: 0, 持续时间: 0.3 }); gsap.set(loader, { 显示: '无' }); // 淡入页面等待 gsap.from(next.container, { 不透明度：0，持续时间：0.5 }); } }] }); ## 集成模式 ### GSAP 集成 Barba.js 与 GSAP 无缝协作以实现动画： **基于时间轴的过渡**：从'@barba/core'导入barba；从“gsap”导入 gsap；巴巴.init({ 转换：[{ 异步离开（{当前}）{ const tl = gsap.timeline(); tl.to(current.container.querySelector('h1'), { y：-50，不透明度：0，持续时间：0.3 }) .to(current.container.querySelector('.content'), { y：-30，不透明度：0，持续时间：0.3 }, '-=0.2') .to(当前.容器, { 不透明度：0，持续时间：0.2 }); 等待 tl.play(); }, 异步输入（{下一个}）{ const tl = gsap.timeline(); // 设置初始状态 gsap.set(next.container, { 不透明度: 0 }); gsap.set(next.container.querySelector('h1'), { y: 50, 不透明度: 0 }); gsap.set(next.container.querySelector('.content'), { y: 30, 不透明度: 0 }); tl.to(下一个.container, { 不透明度：1，持续时间：0.2 }) .to(next.container.querySelector('h1'), { y：0，不透明度：1，持续时间：0.5，轻松：'power3.out' }) .to(next.container.querySelector('.content'), { y：0，不透明度：1，持续时间：0.5，轻松：'power3.out' }, '-=0.3'); 等待 tl.play(); } }] }); **参考 gsap-scrolltrigger 技能**，了解高级 GSAP 集成模式。 ### 特定于视图的初始化每页初始化库或脚本：巴巴.init({ 浏览次数：[ { 命名空间：'家'，输入后（）{ // 初始化主页功能 initHomepageSlider(); initParallaxEffects(); }, 离开之前（）{ // 清理销毁HomepageSlider(); } }, { 命名空间：'画廊'，输入后（）{ 初始化灯箱（）； initMasonry(); }, 离开之前（）{ 销毁灯箱（）； } } ] }); ### 分析跟踪跟踪导航上的页面浏览量： barba.hooks.after(() => { // 谷歌分析 if (typeof gtag !== '未定义') { gtag('配置', 'GA_MEASUREMENT_ID', { page_path: 窗口.位置.路径名 }); } // 或者使用数据层窗口.dataLayer = 窗口.dataLayer || []；窗口.dataLayer.push({ 事件：“页面浏览量”，页面：窗口.位置.路径名 }); }); ### 第三方脚本重新初始化页面转换后重新运行脚本： barba.hooks.after(() => { // 重新初始化第三方小部件 if (typeof twttr !== '未定义') { twttr.widgets.load(); // 推特小部件 } if (FB 类型 !== '未定义') { FB.XFBML.parse(); // Facebook 小部件 } // 重新运行语法高亮 if (typeof Prism !== '未定义') { Prism.highlightAll(); } }); ## 性能优化 ### 1\.预取使用 `@barba/prefetch` 在悬停时加载页面： npm install --save-dev @barba/prefetch 从'@barba/core'导入barba；从 '@barba/prefetch' 导入 barbaPrefetch； barba.use(barbaPrefetch); 巴巴.init({ // 默认情况下，预取在链接悬停时触发预取：{ root: null, // 观察所有链接 timeout: 3000 // 缓存超时时间（以毫秒为单位） } }); ### 2\.防止布局偏移设置容器 min-height 防止内容跳转： [数据-barba =“容器”] { 最小高度：100vh； /* 或者使用视口高度减去页眉/页脚 */ 最小高度：计算（100vh - 80px - 60px）； } ### 3\.优化动画使用 GPU 加速属性： // ✅ 好 - GPU 加速 gsap.to(元素, { 不透明度：0， x：-100，规模：0.9，旋转：45 }); // ❌ 避免 - 导致回流/重绘 gsap.to(元素, { 宽度：'50%'，高度：'300px'，顶部：'100px' }); ### 4\.清理事件监听器删除“beforeLeave”或视图挂钩中的侦听器：巴巴.init({ 观点：[{ 命名空间：'家'，输入后（）{ // 添加监听器 this.clickHandler = () => console.log('点击'); document.querySelector('.btn').addEventListener('click', this.clickHandler); }, 离开之前（）{ // 移除监听器 document.querySelector('.btn').removeEventListener('click', this.clickHandler); } }] }); ### 5\.延迟加载图像推迟图像加载直到转换之后：巴巴.init({ 转换：[{ 异步输入（{下一个}）{ // 首先完成转换等待 gsap.from(next.container, { 不透明度：0，持续时间：0.5 }); // 然后加载图片 const images = next.container.querySelectorAll('img[data-src]'); 图片.forEach(img => { img.src = img.dataset.src; img.removeAttribute('data-src'); }); } }] }); ## 常见陷阱 ### 1\.忘记回报承诺 **问题**：过渡立即完成，无需等待动画。 **解决方案**：始终返回 Promise 或使用 `async/await`： // ❌ 错误 - 动画开始但不等待离开（{当前}）{ gsap.to(current.container, { 不透明度: 0, 持续时间: 0.5 }); } // ✅ 正确 - 返回承诺离开（{当前}）{ 返回 gsap.to(current.container, { 不透明度: 0, 持续时间: 0.5 }); } // ✅ 也是正确的 - async/await 异步离开（{当前}）{ 等待 gsap.to(current.container, { 不透明度: 0, 持续时间: 0.5 }); } ### 2\.不阻止默认链接行为 **问题**：某些链接会导致整页重新加载。 **解决方案**：Barba 自动阻止内部链接的默认设置，但您可能需要排除外部链接：巴巴.init({ 防止：({ href }) => { // 允许外部链接 if (href.indexOf('http') > -1 && href.indexOf(window.location.host) === -1) { 返回真； } 返回假； } }); ### 3\.页面之间的 CSS 冲突 **问题**：旧页面 CSS 在转换期间影响新页面布局。 **解决方案**：使用特定于命名空间的 CSS 或重置样式： /* 命名空间特定的样式 */ [data-barba-namespace="home"] .hero { 背景：蓝色； } [data-barba-namespace="about"] .hero { 背景：红色； } 或者在`beforeEnter`中重置：之前输入（{下一个}）{ // 重置滚动位置 window.scrollTo(0, 0); // 重置任何全局状态 document.body.classList.remove('菜单打开'); } ### 4\.不更新文档标题和元标记 **问题**：页面标题和元标记不会在导航时更新。 **解决方案** ：使用 `@barba/head` 插件或手动更新： npm install --save-dev @barba/head 从'@barba/core'导入barba；从 '@barba/head' 导入 barbaHead；巴巴.use(巴巴头); 巴巴.init({ // Head插件自动更新标签 }); 或者手动： barba.hooks.after(({ next }) => { // 更新标题 document.title = next.html.querySelector('title').textContent; // 更新元标签 const newMeta = next.html.querySelectorAll('meta'); newMeta.forEach(元 => { const name = meta.getAttribute('name') || meta.getAttribute('属性'); 如果（姓名）{ const现有 = document.querySelector(`meta[name="${name}"], meta[property="${name}"]`); 如果（现有）{ 现有的.setAttribute（'内容'，meta.getAttribute（'内容'））; } } }); }); ### 5\.输入时动画闪烁 **问题**：新页面在输入动画开始之前闪烁可见。 **解决方案** : 在 CSS 或 `beforeEnter` 中设置初始不可见状态： /* CSS 方法 */ [数据-barba =“容器”] { 不透明度：0； } [data-barba="container"].is-visible { 不透明度：1； } // JavaScript 方法之前输入（{下一个}）{ gsap.set(next.container, { 不透明度: 0 }); } ### 6\.没有正确定位的同步转换 **问题**：同步转换会导致容器堆叠时布局发生变化。 **解决方案**：在过渡过程中绝对定位容器： [数据-barba =“包装”] { 位置：相对； } [数据-barba =“容器”] { 位置：绝对；顶部：0；左：0；宽度：100%； } 或者用 JavaScript 进行管理：巴巴.init({ 转换：[{ 同步：真， beforeLeave({ 当前 }) { gsap.set(当前.container, { 位置：'绝对'，顶部：0，左：0，宽度：'100%' }); } }] }); ## 资源该技能包括： ### 脚本/ 常见 Barba.js 任务的可执行实用程序： * `transition_generator.py` \- 生成转换样板代码 * `project_setup.py` \- 初始化 Barba.js 项目结构 ###参考资料/ 详细文档： * `api_reference.md` \- 完整的 Barba.js API（钩子、转换、视图、路由器） * `hooks_guide.md` \- 所有 11 个钩子以及执行顺序和用例 * `gsap_integration.md` \-Barba 过渡的 GSAP 动画模式 * `transition_patterns.md` \- 常见的转换实现 ###资产/ 模板和入门项目： * `starter_barba/` \- 完整的 Barba.js + GSAP 入门模板 * `examples/` \- 真实世界的转换实现 ## 相关技能 * **gsap-scrolltrigger** \- 用于过渡中的高级 GSAP 动画 * **locomotive-scroll** \- 可以与 Barba 结合使用，在页面之间平滑滚动 * **motion-framer** \- 基于 React 的页面转换的替代方法

巴尔巴·杰斯

包含技能