swup
适用于服务器渲染网站的多功能且可扩展的页面转换库
485
Swup是为服务端渲染（SSR）网站设计的页面过渡库，通过管理整个页面加载生命周期，实现当前页与下一页之间的平滑动画，同时提供缓存、智能预加载、原生浏览器历史记录同步及增强可访问性等能力，让传统多页网站获得接近单页应用（SPA）的交互体验。
| 收费 | 开源免费（MIT） |
|---|---|
| 平台 | 浏览器端JavaScript库 |
| 中文 | 无官方中文文档 |
| 用途 | 为服务端渲染网站添加类SPA页面切换动画 |
核心能力与工作方式
Swup v4版本（当前稳定版）通过拦截链接点击，用Ajax获取新页面内容，仅替换指定容器（如<main>）内的DOM，配合CSS过渡类实现页面切换动画。它内置了完整的生命周期钩子系统（Visit API），开发者可在动画开始、内容替换、完成等阶段注入自定义逻辑。
- 动画控制: 通过CSS类名（如.is-changing、.is-animating）定义进入/离开动画，支持Fade、Slide、Overlay等官方主题
- 缓存机制: 自动缓存已访问页面，避免重复请求，可配置缓存大小与淘汰策略
- 智能预加载: 根据鼠标悬停或链接可见性预加载页面资源，降低感知延迟
- 历史记录: 使用history.pushState/replaceState管理URL，支持前进/后退按钮正确触发动画
- 可访问性: 自动管理焦点、aria-live区域和页面标题，确保屏幕阅读器用户感知页面变化
插件生态与扩展能力
Swup提供官方插件和社区插件，覆盖表单提交、脚本重执行、页面片段替换、进度条等场景。插件机制基于统一的Helper工具集，开发者可调用getCurrentUrl、updateHistoryRecord、Location等内部API构建自定义功能。
- 官方插件: 包括Body Class（为<body>添加过渡类）、Debug（控制台日志）、Forms（拦截表单提交并动画过渡）、Fragment（仅替换页面片段）、Head（更新<title>和meta）、JS（重新执行<script>）、Parallel（并行动画）、Preload（预加载）、Progress Bar（顶部进度条）、Route Name（基于路由名控制动画）、Scroll（滚动位置恢复）
- 第三方插件: Morph（元素变形动画）、Meta Tags（动态更新OG标签）、Preserve Scroll（保持滚动位置）
- 集成适配: 官方提供Astro、Alpine.js、Google Analytics、Google Tag Manager、Livewire、Matomo等框架/服务的集成方案
- Helper工具: Location类（解析URL路径与哈希）、classify函数（字符串转CSS安全类名）、createHistoryRecord/updateHistoryRecord（创建/更新历史记录并附加自定义数据）
适用场景与注意事项
Swup专为SSR网站设计，静态博客、Hugo、Astro等生成的站点均可使用。实际部署时需注意：页面中的JavaScript（尤其是内联脚本）可能因DOM替换而失效，需配合SwupScriptsPlugin或手动将脚本移至<body>/<main>内；部分第三方评论组件（如DoIt主题）可能无法自动重新初始化，需要额外处理。
- 兼容性: 支持所有现代浏览器，不依赖jQuery
- 体积: v4.5.1版本UMD包约10KB（gzip），插件包通常小于3KB
- 学习曲线: 需理解CSS过渡动画与生命周期钩子，官方提供Getting Started、Example、Demos及Tutorials文档
- 常见问题: 官方维护Common issues页面，涵盖控制台报错、脚本未执行、滚动位置异常等典型场景
常见问题
Q1：Swup是否必须配合特定前端框架使用？
A1：不需要。Swup是框架无关的纯JavaScript库，直接通过<script>标签或npm引入即可。官方提供了Astro、Alpine.js、Livewire等集成方案，但核心库不依赖任何框架。
Q2：使用Swup后页面中的JavaScript为什么可能失效？
A2：Swup通过Ajax替换页面内容，不会自动重新执行<script>标签中的代码。官方提供了@swup/scripts-plugin（SwupScriptsPlugin）来解决此问题，该插件会检测并重新执行<body>和<head>中的脚本。开发者也可通过data-swup-ignore-script属性标记无需重复执行的脚本。
Q3：Swup的缓存和预加载机制如何配置？
A3：缓存默认启用，可通过Swup实例的options.cache属性调整（如设置maxPages限制缓存页面数）。预加载通过@swup/preload-plugin实现，支持hover和visible两种触发模式，可配置预加载延迟时间。
更多同类工具与网站,可在动画库分类继续挑选。
-
相关推荐
-
Lenis
平滑滚动699 详情 -
CSS 加载动画集合
包含常用的旋转、滚动、翻转等动画效果合集，支持方便复制 CSS 代码复用。641 详情 -
simpleParallax.js -
Parallax效果303 详情 -
Granim.js
Gradient Animations300 详情 -
Floating UI
用于定位浮动元素并为其创建交互的 JavaScript 库。618 详情 -
CSS投影生成器
Friendly tutorials for developers. Focus on React, CSS, Animation, and more!318 详情 -
catdad
canvas-confetti: 🎉 performant confetti animation in the browser311 详情 -
Liseré
「选中效果」代码组件333 详情
评论
暂无评论