jQuery Mobile - 过渡动画

它允许在指定持续时间内更改属性值，并通过为每个状态应用不同的样式，将元素的行为从一个状态更改为另一个状态。

下表列出了 jQuery Mobile 框架中使用的一些页面过渡动画 -

序号	过渡动画及描述	适用于页面	适用于对话框
1	淡入淡出 (fade) 您可以使元素淡入淡出可见。	淡入淡出页面	淡入淡出对话框
2	翻转 (flip) 将元素从背面翻转到正面到下一页。	翻转页面	翻转对话框
3	弹出 (pop) 您可以创建一个弹出窗口。	弹出页面	弹出对话框
4	流动 (flow) 通过将当前页面移开的方式显示下一页。	流动页面	流动对话框
5	滑动 (slide) 您可以将页面从右向左滑动。	滑动页面	滑动对话框
6	滑动淡入 (slidefade) 将页面从右向左滑动，并淡入下一页。	滑动淡入页面	滑动淡入对话框
7	向上滑动 (slideup) 将页面从底部向上滑动。	向上滑动页面	向上滑动对话框
8	向下滑动 (slidedown) 将页面从顶部向下滑动。	向下滑动页面	向下滑动对话框
9	翻页 (turn) 您可以翻到下一页。	翻页页面	翻页对话框
10	无 (none) 使用此属性时，您不能使用任何过渡动画效果。	无页面	无对话框

设置过渡动画和全局配置

默认情况下，页面在框架中将具有淡入淡出 (fade)过渡动画。您可以通过向链接添加data-transition属性来使用自定义过渡动画。您可以使用defaultPageTransition选项全局地使用不同的默认页面过渡动画效果。对于对话框，您可以使用defaultDialogTransition选项。

回退过渡动画

除了淡入淡出 (fade) 过渡动画外，所有过渡动画都支持 3D 变换。不支持 3D 变换的设备必须使用淡入淡出 (fade) 过渡动画。某些浏览器不支持每种过渡动画类型的 3D 变换，因此您可以使用淡入淡出 (fade)作为默认的过渡动画回退。

过渡动画的最大滚动距离

当您从页面滚动到页面或从页面滚动到页面，并且滚动位置是设备屏幕高度的三倍时，过渡动画将设置为无。有时，当您单击任何导航元素时，您可能会发现响应速度变慢或浏览器可能会崩溃；因此，为了避免这种情况，我们使用getMaxScrollForTransition函数通过使用滚动位置来进行过渡动画。

过渡动画的最大宽度

当窗口宽度高于像素宽度时，您可以禁用过渡动画。您可以使用$.mobile.maxTransitionWidth全局选项配置过渡动画的最大宽度，该选项默认为 false。它采用像素宽度或 false 值，如果它不是 false 值，则当窗口高于指定值时，过渡动画将设置为无。

相同页面的过渡动画

您可以使用页面容器小部件的change()方法的allowSamePageTransition选项将过渡动画添加到当前页面。

创建自定义过渡动画

您可以使用$.mobile.transitionHandlers选项在页面中创建自定义过渡动画，该选项扩展了网站或应用程序上过渡动画的选择。

打印页面