本文介绍jQuery Mobile中的页面过渡效果配置方法及示例代码，包括多种过渡类型如fade、pop等，并展示如何通过data-transition属性实现不同过渡效果。
在jQuery Mobile中，我们可以设置从一个页面到另一个页面的效果，那就是过渡(transitions)，过渡效果可应用于任意链接或通过使用 data-transition属性进行的表单提交。
<a href="index.html"
data-transition="pop">I'll pop</a>
下面的表格展示了可与data-transition 属性一同使用的可用过渡：
|
过渡 |
描述 |
|
fade |
默认。淡入淡出到下一页。 |
|
pop |
像弹出窗口那样转到下一页。 |
|
flip |
从后向前翻动到下一页。 |
|
turn |
转向下一页 |
|
flow |
抛出当前页面，引入下一页。 |
|
slidefade |
从右向左滑动并淡入到下一页。 |
|
slide |
从右向左滑动到下一页。 |
|
slidedown |
从上到下滑动到下一页。 |
|
slideup |
从下到上滑动到下一页。 |
|
none |
无过渡效果 |
提示：以上所有效果同时支持反向动作，例如，如果您希望页面从左向右滑动，而不是从右向左，请使用值为"reverse" 的data-direction 属性。在后退按钮上是默认的。
示例：
fade效果：淡入淡出到下一页
pop效果：像弹出窗口那样转到下一页
flip效果：从后向前翻动到下一页
turn效果：转向下一页
flow效果：抛出当前页面，引入下一页
slidefade效果：从右向左滑动并淡入到下一页
slide效果：从右向左滑动到下一页
slidedown效果：从上到下滑动到下一页
slideup效果：从下到上滑动到下一页
none效果：无过渡效果
示例代码如下：
<!DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<title>过渡页面</title>
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="firstPage">
<div data-role="header">
<h1>这是页面1标题</h1>
</div>
<div data-role="content">
<p><a href="#secondPage"data-transition="fade" >fade跳转到页面2</a></p>
<p><a href="#secondPage"data-transition="pop" >pop跳转到页面2</a></p>
<p><a href="#secondPage"data-transition="flip" >flip跳转到页面2</a></p>
<p><a href="#secondPage"data-transition="turn" >turn跳转到页面2</a></p>
<p><a href="#secondPage"data-transition="flow" >flow跳转到页面2</a></p>
<p><a href="#secondPage"data-transition="slidefade">slidefade跳转到页面2</a></p>
<p><a href="#secondPage"data-transition="slide" >slide跳转到页面2</a></p>
<p><a href="#secondPage"data-transition="slidedown">slidedown跳转到页面2</a></p>
<p><a href="#secondPage"data-transition="slideup" >slideup跳转到页面2</a></p>
<p><a href="#secondPage"data-transition="none" >none跳转到页面2</a></p>
</div>
<div data-role="footer">
<h1>这里是页面1底部</h1>
</div>
</div>
<div data-role="page" id="secondPage">
<div data-role="header">
<h1>这是页面2标题</h1>
</div>
<div data-role="content">
<p><a href="#firstPage"data-transition="fade" >fade跳转到页面1</a></p>
<p><a href="#firstPage"data-transition="pop" >pop跳转到页面1</a></p>
<p><a href="#firstPage"data-transition="flip" >flip跳转到页面1</a></p>
<p><a href="#firstPage"data-transition="turn" >turn跳转到页面1</a></p>
<p><a href="#firstPage"data-transition="flow" >flow跳转到页面1</a></p>
<p><a href="#firstPage"data-transition="slidefade">slidefade跳转到页面1</a></p>
<p><a href="#firstPage"data-transition="slide" >slide跳转到页面1</a></p>
<p><a href="#firstPage"data-transition="slidedown">slidedown跳转到页面1</a></p>
<p><a href="#firstPage"data-transition="slideup" >slideup跳转到页面1</a></p>
<p><a href="#firstPage"data-transition="none" >none跳转到页面1</a></p>
</div>
<div data-role="footer">
<h1>这里是页面2底部</h1>
</div>
</div>
</body>
</html>
效果如下：
扫一扫
389
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
