jQuery Mobile 过渡（Transitions）详解
过渡（Transition） 是 jQuery Mobile 页面切换时的动画效果，让移动端体验更流畅、像原生 App。
注意：jQuery Mobile 1.4.5 共支持 8 种内置过渡，基于 CSS3 实现。
1. 基本使用方式
<a href="#page2" data-transition="slide">滑动进入</a>href="#目标页面ID"data-transition="效果名"
2. 8 种内置过渡效果
| 过渡名 | data-transition 值 | 说明 | 推荐场景 |
|---|---|---|---|
| fade | fade | 淡入淡出（默认） | 表单提交、轻量切换 |
| slide | slide | 水平滑动（从右到左） | 页面导航、列表详情 |
| slideup | slideup | 从下向上滑入 | 弹出层、模态框 |
| slidedown | slidedown | 从上向下滑入 | 返回上一页 |
| flip | flip | 3D 翻转 | 卡片切换、游戏 |
| pop | pop | 中心放大弹出 | 对话框、提示 |
| flow | flow | 流动抛出 | 创意效果（性能稍差） |
| turn | turn | 翻书效果 | 阅读器、相册 |
| none | none | 无动画 | 快速切换、性能优化 |
3. 反向过渡（Reverse）
使用 data-direction="reverse" 实现返回时的反向动画：
<!-- 前进：从右滑入 -->
<a href="#page2" data-transition="slide">去页面2</a>
<!-- 返回：从左滑出 -->
<a href="#page1" data-transition="slide" data-direction="reverse">返回</a>4. 完整示例（可直接运行）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQM 过渡演示</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- 首页 -->
<div data-role="page" id="home">
<div data-role="header"><h1>过渡效果</h1></div>
<div data-role="main" class="ui-content">
<h3>选择一种过渡效果</h3>
<ul data-role="listview" data-inset="true">
<li><a href="#page2" data-transition="fade">淡入 (fade)</a></li>
<li><a href="#page2" data-transition="slide">滑动 (slide)</a></li>
<li><a href="#page2" data-transition="slideup">上滑 (slideup)</a></li>
<li><a href="#page2" data-transition="flip">翻转 (flip)</a></li>
<li><a href="#page2" data-transition="pop">弹出 (pop)</a></li>
<li><a href="#page2" data-transition="flow">流动 (flow)</a></li>
<li><a href="#page2" data-transition="turn">翻页 (turn)</a></li>
</ul>
</div>
</div>
<!-- 页面2 -->
<div data-role="page" id="page2">
<div data-role="header">
<a href="#home" class="ui-btn ui-icon-back ui-btn-icon-left"
data-transition="slide" data-direction="reverse">返回</a>
<h1>目标页</h1>
</div>
<div data-role="main" class="ui-content">
<h2>你已到达！</h2>
<p>当前时间：2025年11月17日 02:46（CET）</p>
<p>国家：比利时 (BE)</p>
<div class="ui-grid-a">
<div class="ui-block-a">
<a href="#home" data-transition="slidedown" class="ui-btn ui-shadow">下滑返回</a>
</div>
<div class="ui-block-b">
<a href="#home" data-transition="none" class="ui-btn ui-mini">无动画</a>
</div>
</div>
</div>
</div>
</body>
</html>5. 全局设置默认过渡
在 <head> 中添加配置：
<script>
$(document).bind("mobileinit", function() {
// 设置全局默认过渡为 slide
$.mobile.defaultPageTransition = "slide";
$.mobile.defaultDialogTransition = "pop";
});
</script>
<!-- 注意：必须在 jQuery Mobile JS 之前引入 -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>6. 性能优化建议
| 建议 | 说明 |
|---|---|
避免 flow / turn 在低端设备 | 消耗 GPU，易卡顿 |
使用 none 提升速度 | 内网工具、快速原型 |
结合 data-position="fixed" | 防止页面跳动 |
| iOS 设备开启硬件加速 | 默认开启，无需额外设置 |
<!-- 强制无动画（适合老设备） -->
<a href="#next" data-transition="none">快速跳转</a>7. 自定义过渡（进阶）
jQuery Mobile 允许通过 CSS3 动画 自定义过渡：
- 在
mobileinit中注册新过渡：
$(document).bind("mobileinit", function() {
$.mobile.transitionHandlers["mycustom"] = $.mobile.Transition;
});- 编写 CSS（复杂，不推荐初学者）。
建议：直接使用内置 8 种即可满足 99% 需求。
8. 常见问题（FAQ）
| 问题 | 解决方案 |
|---|---|
| 过渡卡顿 | 换用 fade 或 none |
| 返回时动画方向错误 | 加上 data-direction="reverse" |
| 外部链接也触发过渡 | 加上 rel="external" |
| iPhone 上白屏一闪 | 添加 data-transition="fade" |
<!-- 跳出 AJAX 导航 -->
<a href="https://www.google.com" rel="external" target="_blank">打开谷歌</a>9. 过渡效果对比表（视觉参考）
| 效果 | 视觉描述 | 适用场景 |
|---|---|---|
fade | 透明度变化 | 轻量、稳定 |
slide | 左右推拉 | 标准导航 |
slideup | 底部推上 | 详情页 |
flip | 3D 翻转 | 趣味交互 |
pop | 中心放大 | 模态框 |
总结：推荐组合
| 场景 | 推荐过渡 |
|---|---|
| 标准页面切换 | slide |
| 返回上一页 | slide + reverse |
| 对话框/提示 | pop |
| 表单提交成功 | fade |
| 性能优先 | none |
需要我为你生成：
- 所有过渡效果的 GIF 演示图？
- 带底部导航栏的多页过渡应用？
- 过渡 + 页面预加载 的优化版本？
随时告诉我！
