基本过渡概念：
1. Ajax 加载： jQuery Mobile 使用 Ajax 技术来加载新页面的内容，这意味着只加载新页面的内容而不刷新整个页面。这有助于提高性能和用户体验。
2. 过渡效果： 页面之间的过渡效果通过 CSS3 过渡和动画来实现。jQuery Mobile 提供了一些内置的过渡效果，如滑动、淡入淡出等。
页面过渡示例：
以下是一个简单的例子，演示了如何使用 jQuery Mobile 实现页面过渡效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Page Transitions</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- Home Page -->
<div data-role="page" id="home">
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
<p>Welcome to the Home Page!</p>
<a href="#about" data-role="button" data-transition="slide">Go to About Page (Slide)</a>
<a href="#contact" data-role="button" data-transition="flip">Go to Contact Page (Flip)</a>
</div>
<div data-role="footer">
<h4>© 2023 My App</h4>
</div>
</div>
<!-- About Page -->
<div data-role="page" id="about">
<div data-role="header">
<h1>About Page</h1>
</div>
<div data-role="content">
<p>This is the About Page.</p>
<a href="#home" data-role="button" data-transition="slide">Back to Home Page (Slide)</a>
</div>
<div data-role="footer">
<h4>© 2023 My App</h4>
</div>
</div>
<!-- Contact Page -->
<div data-role="page" id="contact">
<div data-role="header">
<h1>Contact Page</h1>
</div>
<div data-role="content">
<p>This is the Contact Page.</p>
<a href="#home" data-role="button" data-transition="flip">Back to Home Page (Flip)</a>
</div>
<div data-role="footer">
<h4>© 2023 My App</h4>
</div>
</div>
</body>
</html>
在这个例子中，每个链接按钮都有一个 data-transition 属性，用于指定过渡效果。在这里，我们使用了两种过渡效果：slide 和 flip。你可以根据需要选择其他过渡效果，如 fade、pop 等。过渡效果会在页面之间切换时产生相应的动画效果，增强用户体验。
转载请注明出处：http://www.zyzy.cn/article/detail/14446/jQuery Mobile