jQuery Mobile - 过渡
它允许更改在指定持续时间内发生的属性值，并通过为每个状态应用不同的样式来将元素的行为从一种状态更改为另一种状态。
下表列出了 jQuery Mobile 框架中使用的一些页面过渡转换 −
| 序号 | 转换 & 说明 | 页面 | 对话框 |
|---|---|---|---|
| 1 | fade 您可以使元素淡入和淡出可见性。 |
Fade Page | Fade Dialog |
| 2 | flip 从后向前翻转元素到下一页。 |
Flip Page | Flip Dialog |
| 3 | pop 您可以创建一个弹出窗口。 |
Pop Page | Pop Dialog |
| 4 | flow 通过远离当前页面来显示下一页。 |
Flow Page | Flow Dialog |
| 5 | slide 您可以从右向左滑动页面。 |
Slide Page | Slide Dialog |
| 6 | slidefade 从右向左滑动页面并淡入下一页。 |
Slidefade Page | Slidefade Dialog |
| 7 | slideup 从底部向上滑动页面。 |
Slideup Page | Slideup Dialog |
| 8 | slidedown 从上到下滑动页面。 |
Slidedown Page | Slidedown Dialog |
| 9 | turn 你可以翻到下一页。 |
Turn Page | Turn Dialog |
| 10 | none 您不能通过使用此属性来使用任何过渡效果。 |
None Page | None Dialog |
设置转换和全局配置
默认情况下，页面将在框架中进行fade 淡化过渡。 您可以通过向链接添加 data-transition 属性来使用自定义转换。 您可以全局使用 defaultPageTransition 选项为页面使用不同的默认过渡效果。 对于对话框，您可以使用 defaultDialogTransition 选项。
回退过渡
除淡入淡出过渡外，所有过渡都支持 3D 变换。 不支持 3D 转换的设备将不得不使用淡入淡出过渡。 某些浏览器不支持每种过渡类型的 3D 变换，因此您可以使用 fade 作为默认过渡回退。
过渡的最大滚动
当您从页面滚动或滚动到页面时，过渡设置为无，滚动位置将是设备屏幕高度的三倍。 有时，您可能会在单击任何导航元素时响应变慢或浏览器崩溃； 因此，为了避免这种情况，我们通过 getMaxScrollForTransition 函数使用滚动位置进行过渡。
过渡的最大宽度
当窗口宽度高于像素宽度时，您可以禁用过渡。 您可以使用 $.mobile.maxTransitionWidth 全局选项配置过渡的最大宽度，该选项默认设置为 false。 它取值如像素宽度或false值，当窗口高于指定值时，如果不是false值，transition将被设置为none。
同一页面过渡转换
您可以使用页面容器小部件的 change() 方法的 allowSamePageTransition 选项将转换添加到当前页面。
创建自定义过渡
您可以使用 $.mobile.transitionHandlers 选项在页面中创建自定义转换，该选项可扩展网站或应用程序上的转换选择。
