LogoClawIndex
案例技能关于
LogoClawIndex

barba-js - 实现 Barba.js 页面过渡

为多页面网站实现平滑页面过渡和类似 SPA 的导航,并支持生命周期钩子、视图、路由及动画集成。

标签

更新于: 2026-10-06
Barba.js页面过渡AJAX 导航路由GSAPJavaScript

能力

典型输入

典型输出

该技能可以做什么

  • 定义包装器和容器
  • 配置过渡生命周期钩子
  • 实现页面专属行为
  • 添加基于路由的过渡
  • 集成 GSAP 动画
  • 管理 AJAX 页面导航

输入

  • HTML 页面结构
  • 过渡配置
  • 导航路由
  • 动画集成代码

输出

  • 动画页面过渡
  • 更新后的动态容器
  • 浏览器历史记录更新
  • 页面专属初始化

要求

  • JavaScript Web 项目
  • @barba/core 软件包
  • 浏览器 DOM 环境

来源

  • 规范: SKILL.md

ClawIndex

OpenClaw Skills 与 Use Case 索引

ClawIndex 是一个生态驱动的 OpenClaw Skills 与真实 Use Case 索引站。

索引

Skills·
Cases

Meta

关于·
声明·
邮箱·
GitHub
© 2026 ClawIndex 保留所有权利。
定义包装器和容器
配置过渡生命周期钩子
实现页面专属行为
添加基于路由的过渡
HTML 页面结构
过渡配置
导航路由
动画页面过渡
更新后的动态容器
浏览器历史记录更新