jQuery Mobile 擁有一系列關(guān)于如何從一頁過渡到下一頁的效果枉证。
Tips：如需實現(xiàn)過渡效果障陶，瀏覽器必須支持 CSS3 3D 轉(zhuǎn)換抹沪，如果瀏覽器不支持，呈現(xiàn)的效果同 none。
- Internet Explorer 10 支持 3D 轉(zhuǎn)換（更早的版本不支持）
- Opera 仍然不支持 3D 轉(zhuǎn)換
過渡效果可應用于任意鏈接或通過使用 data-transition 屬性進行的表單提交敢靡；
所有效果同時支持反向動作，在同一鏈接上添加 data-direction="reverse"址晕。
類 | 描述
- | :-: | -:
fade | 默認痹愚。淡入淡出到下一頁
flip | 從后向前翻動到下一頁
flow | 拋出當前頁面，引入下一頁
pop | 像彈出窗口那樣轉(zhuǎn)到下一頁
slide | 從右向左滑動到下一頁
slidefade | 從右向左滑動并淡入到下一頁
slideup | 從下到上滑動到下一頁
slidedown | 從上到下滑動到下一頁
turn | 轉(zhuǎn)到下一頁
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">跳轉(zhuǎn)到頁面二</a>
</div>
<div data-role="footer">
<h1>footer</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>過渡</h1><!--這個 h1 的內(nèi)容會影響頁面title-->
</div>
<div data-role="content">
<p>頁面二</p>
<a href="#pageone" data-transition="flip">跳轉(zhuǎn)到頁面一</a>
</div>
<div data-role="footer">
<h1>頁腳文本</h1>
</div>
</div>
</body>
</html>
