jQuery Mobile 过渡
【摘要】 jQuery Mobile 包含 CSS3 效果让您选择页面打开的方式。jQuery Mobile 页面切换效果jQuery Mobile 提供了各种页面切换到下一个页面的效果。注意：为了实现页面切换效果，浏览器必须支持 CSS3 3D 切换：12.010.016.04.015.0表格中的数字为支持 3D 旋转的最小浏览器版本号。页面过渡效果可被应用于任何使用 data-transition...
jQuery Mobile 包含 CSS3 效果让您选择页面打开的方式。
jQuery Mobile 页面切换效果
jQuery Mobile 提供了各种页面切换到下一个页面的效果。
注意：为了实现页面切换效果，浏览器必须支持 CSS3 3D 切换：
| 12.0 | 10.0 | 16.0 | 4.0 | 15.0 |
表格中的数字为支持 3D 旋转的最小浏览器版本号。
页面过渡效果可被应用于任何使用 data-transition 属性的链接或表单：
页面切换效果可被应用于任何使用 data-transition 属性的链接或表单提交：
<a href="#anylink" data-transition="slide">切换到第二个页面</a>下面的表格显示了通过使用 data-transition 属性后可用的页面切换：
| 过渡 | 描述 | 页面 | 对话框 |
|---|---|---|---|
| fade | 默认。淡入到下一页 | 尝试一下 | 尝试一下 |
| flip | 从后向前翻转到下一页 | 尝试一下 | 尝试一下 |
| flow | 抛出当前页，进入下一页 | 尝试一下 | 尝试一下 |
| pop | 像弹出窗口那样转到下一页。 | 尝试一下 | 尝试一下 |
| slide | 从右向左滑动到下一页。 | 尝试一下 | 尝试一下 |
| slidefade | 从右向左滑动并淡入到下一页。 | 尝试一下 | 尝试一下 |
| slideup | 从下到上滑动到下一页。 | 尝试一下 | 尝试一下 |
| slidedown | 从上到下滑动到下一页。 | 尝试一下 | 尝试一下 |
| turn | 转向下一页。 | 尝试一下 | 尝试一下 |
| none | 无过渡效果。 | 尝试一下 | 尝试一下 |
 |
在 jQuery Mobile 的所有链接上，默认使用淡入淡出的效果（如果浏览器支持）。 |
|---|
提示：上面的所有效果支持后退行为。例如，如果您想要页面从左向右滑动，而不是从右向左滑动，请使用带有 "reverse" 值的 data-direction 属性。在后退按钮上这是默认的。
实例
<a href="#pagetwo" data-transition="slide" data-direction="reverse">切换</a>
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）