jQuery Mobile 拥有一系列关于如何从一页过渡到下一页的效果。
Tips：如需实现过渡效果，浏览器必须支持 CSS3 3D 转换，如果浏览器不支持，呈现的效果同 none。
- Internet Explorer 10 支持 3D 转换（更早的版本不支持）
- Opera 仍然不支持 3D 转换
过渡效果可应用于任意链接或通过使用 data-transition 属性进行的表单提交；
所有效果同时支持反向动作，在同一链接上添加 data-direction="reverse"。
类 | 描述
- | :-: | -:
fade | 默认。淡入淡出到下一页
flip | 从后向前翻动到下一页
flow | 抛出当前页面，引入下一页
pop | 像弹出窗口那样转到下一页
slide | 从右向左滑动到下一页
slidefade | 从右向左滑动并淡入到下一页
slideup | 从下到上滑动到下一页
slidedown | 从上到下滑动到下一页
turn | 转到下一页
none | 无过渡效果
实践
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gbk">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>过渡</title>
<link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
</head>
<body>
<!--
fade
flip
flow
pop
slide
slidefade
slideup
slidedown
turn
none
-->
<div data-role="page" id="pageone">
<div data-role="header">
<h1>header</h1>
</div>
<div data-role="content">
<p>页面一</p>
<a href="#pagetwo">跳转到页面二</a>
</div>
<div data-role="footer">
<h1>footer</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>过渡</h1><!--这个 h1 的内容会影响页面title-->
</div>
<div data-role="content">
<p>页面二</p>
<a href="#pageone" data-transition="flip">跳转到页面一</a>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
</body>
</html>
网友评论