mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-17 06:20:26 +00:00
55 lines
No EOL
2.9 KiB
HTML
Executable file
55 lines
No EOL
2.9 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>jQuery Mobile Docs - Transitions</title>
|
|
<link rel="stylesheet" href="../../themes/default/" />
|
|
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
|
<script src="../../js/jquery.js"></script>
|
|
<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
|
|
<script src="../_assets/js/jqm-docs.js"></script>
|
|
<script src="../../js/"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page" class="type-interior">
|
|
|
|
<div data-role="header" data-theme="f">
|
|
<h1>Transitions</h1>
|
|
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content">
|
|
|
|
<h2>Page transitions</h2>
|
|
|
|
<p>The jQuery Mobile framework includes a set of six CSS-based transition effects that can be applied to any object or page change event, which apply the chosen transition when navigating to a new page and the reverse transition for the Back button. By default, the framework applies the right to left slide transition.</p>
|
|
|
|
<p>To set a custom transition effect, add the <code>data-transition</code> attribute to the link. Possible values include: </p>
|
|
|
|
<code><code>
|
|
<a href="index.html" data-transition="pop">I'll pop</a>
|
|
</code></code>
|
|
|
|
<p>
|
|
<a href="transition-success.html" data-role="button" data-rel="dialog" data-transition="slide">slide</a>
|
|
<a href="transition-success.html" data-role="button" data-rel="dialog" data-transition="slideup">slideup</a>
|
|
<a href="transition-success.html" data-role="button" data-rel="dialog" data-transition="slidedown">slidedown</a>
|
|
<a href="transition-success.html" data-role="button" data-rel="dialog" data-transition="pop">pop</a>
|
|
<a href="transition-success.html" data-role="button" data-rel="dialog" data-transition="fade">fade</a>
|
|
<a href="transition-success.html" data-role="button" data-rel="dialog" data-transition="flip">flip *</a>
|
|
</p>
|
|
|
|
<p>NOTE: The flip transition isn't rendered correctly on most versions of Android because it lacks 3D CSS transform capabilities. Unfortunately, instead of ignoring the flip, Android makes the page "cartwheel" away by rotating instead of flipping. We recommend using this transition sparingly until support improves.</p>
|
|
<p>In addition, you can also force a "backwards" transition by specifying <code>data-direction="reverse"</code> on your link. Note: (this was formerly <code>data-back="true"</code>, which will remain supported until 1.0)</p>
|
|
|
|
<div class="ui-body ui-body-e">
|
|
<p><strong>Transitions from <a href="http://www.jqtouch.com/">jQtouch</a></strong> (<em>with small modifications</em>): Built by David Kaneda and maintained by Jonathan Stark.</p>
|
|
</div>
|
|
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |