jQuery Mobile - Transitions

它允许更改在指定持续时间内发生的属性值,并通过为每个状态应用不同的样式来改变元素从一个状态到另一个状态的行为.

下面的表列出了一些在jQuery Mobile框架中使用的页面转换 :

Sr.No.Transition&描述For Pages对话框
1

淡出

您可以让元素淡入和淡出可见性.

淡入淡出页面淡出对话框
2

翻转

将元素从后到前翻转到下一页.

翻页翻转对话框
3

pop

您可以创建一个弹出窗口.

首页Pop Dialog
4

流程

通过保持当前页面显示下一页.

流程页面流程对话框
5

幻灯片

您可以从右向左滑动页面.

幻灯片页面幻灯片对话框
6

slidefade

从右向左滑动页面并在下一页中淡出

Slidefade PageSlidefade对话框
7

slideup

从下往上滑动页面.

幻灯片页面幻灯片对话框
8

滑动

从上到下滑动页面.

Slidedown PageSlidedown Dialog
9

您可以转到下一页.

翻页拨打对话框
10

none

使用此属性不能使用任何过渡效果.

无页面无对话框

设置转换和全局配置

默认情况下,页面将在框架中进行 淡出 转换.您可以通过将 数据转换 属性添加到链接来使用自定义转换.您可以全局使用 defaultPageTransition 选项为页面使用不同的默认过渡效果.对于对话框,您可以使用 defaultDialogTransition 选项.

后退转换

全部转换支持除淡入淡出过渡之外的3D变换.不支持3D转换的设备,他们将不得不利用淡入淡出过渡.某些浏览器不支持每种转换类型的3D转换,因此您可以使用 淡入淡出 作为默认转换回退.

Max Scroll for Transitions

当您从页面滚动或向页面滚动时,转换设置为无,滚动位置将是设备屏幕高度的三倍.有时,当您单击任何导航元素时,响应速度可能会变慢或浏览器可能会崩溃;所以为了避免这种情况,我们使用 getMaxScrollForTransition 函数使用滚动位置进行转换.

转换的最大宽度

当窗口宽度高于像素宽度时,可以禁用转换.您可以使用 $.mobile.maxTransitionWidth 全局选项配置转场的最大宽度,默认情况下设置为false.它采用像素宽度或假值等值,如果窗口高于指定值,则转换将设置为无.

相同页面转换

您可以使用页面容器窗口小部件 更改的 allowSamePageTransition 选项将过渡添加到当前页面( ) 方法.

创建自定义转换

您可以使用在页面中创建自定义转换 $.mobile.transitionHandlers 选项,用于扩展网站或应用程序上的转换选择.