libs/js/jquery-mobile-1.1.0/docs/pages/page-transitions.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4         <meta charset="utf-8">
   5         <meta name="viewport" content="width=device-width, initial-scale=1">
   6         <title>jQuery Mobile Docs - Transitions</title>
   7         <link rel="stylesheet"  href="../../css/themes/default/jquery.mobile.css" />
   8         <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
   9
  10         <script src="../../js/jquery.js"></script>
  11         <script src="../../docs/_assets/js/jqm-docs.js"></script>
  12         <script src="../../js/"></script>
  13
  14 </head>
  15 <body>
  16
  17         <div data-role="page" class="type-interior">
  18
  19                 <div data-role="header" data-theme="f">
  20                 <h1>Transitions</h1>
  21                 <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
  22                 <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
  23         </div><!-- /header -->
  24
  25         <div data-role="content">
  26                 <div class="content-primary">
  27                 <h2>Page transitions</h2>
  28
  29                 <p>The jQuery Mobile framework includes a set of CSS-based transition effects that can be applied to any page link or form submission with Ajax navigation: </p>
  30
  31                         <style>
  32                                 table { width:100%; border-bottom:1px solid #ccc; border-collapse: collapse; }
  33                                 th { text-align:left; }
  34                                 th h3 { margin:.6em 0; }
  35                                 th, td { vertical-align:top; border-top:1px solid #ccc; padding: 1px 3px; }
  36                                 td .ui-btn { margin:.4em 0 .5em 0; }
  37                                 td .ui-btn-inner { padding: .4em 15px; }
  38                         </style>
  39
  40                 <table margin="0">
  41                         <tr>
  42                                 <th><h3>fade</h3></th>
  43                                 <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">dialog</a></td>
  44                                 <td><a href="page-transitions-page.html" data-role="button" data-transition="fade" data-inline="true">page</a></td>
  45                         </tr>
  46                         <tr>
  47                                 <th><h3>pop</h3></th>
  48                                 <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="pop" data-inline="true">dialog</a></td>
  49                                 <td><a href="page-transitions-page.html" data-role="button" data-transition="pop" data-inline="true">page</a></td>
  50                         </tr>
  51                         <tr>
  52                                 <th><h3>flip</h3></th>
  53                                 <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flip" data-inline="true">dialog</a></td>
  54                                 <td><a href="page-transitions-page.html" data-role="button" data-transition="flip" data-inline="true">page</a></td>
  55                         </tr>
  56                         <tr>
  57                                 <th><h3>turn</h3></th>
  58                                 <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="turn" data-inline="true">dialog</a></td>
  59                                 <td><a href="page-transitions-page.html" data-role="button" data-transition="turn" data-inline="true">page</a></td>
  60                         </tr>
  61                         <tr>
  62                                 <th><h3>flow</h3></th>
  63                                 <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flow" data-inline="true">dialog</a></td>
  64                                 <td><a href="page-transitions-page.html" data-role="button" data-transition="flow" data-inline="true">page</a></td>
  65                         </tr>
  66                         <tr>
  67                                 <th><h3>slidefade</h3></th>
  68                                 <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidefade" data-inline="true">dialog</a></td>
  69                                 <td><a href="page-transitions-page.html" data-role="button" data-transition="slidefade" data-inline="true">page</a></td>
  70                         </tr>
  71                         <tr>
  72                                 <th><h3>slide</h3></th>
  73                                 <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slide" data-inline="true">dialog</a></td>
  74                                 <td><a href="page-transitions-page.html" data-role="button" data-transition="slide" data-inline="true">page</a></td>
  75                         </tr>
  76                         <tr>
  77                                 <th><h3>slideup</h3></th>
  78                                 <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slideup" data-inline="true">dialog</a></td>
  79                                 <td><a href="page-transitions-page.html" data-role="button" data-transition="slideup" data-inline="true">page</a></td>
  80                         </tr>
  81                         <tr>
  82                                 <th><h3>slidedown</h3></th>
  83                                 <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-inline="true">dialog</a></td>
  84                                 <td><a href="page-transitions-page.html" data-role="button" data-transition="slidedown" data-inline="true">page</a></td>
  85                         </tr>
  86                         <tr>
  87                                 <th><h3>none</h3></th>
  88                                 <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">dialog</a></td>
  89                                 <td><a href="page-transitions-page.html" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">page</a></td>
  90                         </tr>
  91                 </table>
  92
  93
  94 <p><strong>Only seeing fade transitions?</strong> To view all transition types, you must be on a browser that supports 3D transforms. By default, devices that lack 3D support (such as Android 2.x) will fallback to "fade" for all transition types. This behavior is configurable (see below).</p>
  95
  96 <p><strong>Transitions were originally inspired by <a href="http://www.jqtouch.com/">jQtouch</a></strong> They've since been rebuilt, but props to David Kaneda and Jonathan Stark for the initial guidance.</p>
  97
  98         <h2>Setting a transition on a link or form submit</h2>
  99         <p>By default, the framework applies a <strong>fade</strong> transition. To set a custom transition effect, add the <code>data-transition</code> attribute to the link. </p>
 100
 101 <code><code>
 102 &lt;a href=&quot;index.html&quot; <strong>data-transition=&quot;pop&quot;</strong>&gt;I'll pop&lt;/a&gt;
 103 </code></code>
 104
 105                 <p>When the Back button is pressed, the framework will automatically apply the reverse version of the transition that was used to show the page. To specify that the reverse version of a transition should be used, add the <code>data-direction="reverse"</code> attribute to a link.</p>
 106
 107                 <h2>Global configuration of transitions</h2>
 108
 109                 <p>Set the <code>defaultPageTransition</code> <a href="../api/globalconfig.html">global option</a> if you'd prefer a different default transition. Dialogs have a different option called <code>defaultDialogTransition</code> that can also set configured.</p>
 110
 111
 112                 <h2>Browser support and performance</h2>
 113                 <p>All transitions are built with CSS keyframe animations and include both <code>-webkit</code> vendor prefixed rules for iOS, Blackberry, Android, Safari and Chrome browsers and <code>-moz</code> rules for Firefox browsers. Support for keyframe animations and transition smoothness is determined by the browser version and hardware and will safely fall back to no transition if animations aren't supported. To proactively exclude transition in situations with poor performance, we exclude browsers that lack 3D transforms and provide a fallback transition and apply a max width for when transitions are applied.</p>
 114
 115                 <h2>Defining fallback transitions for non-3D support</h2>
 116                 <p>By default, all transitions except fade require 3D transform support. Devices that lack 3D support will fall back to a fade transition, regardless of the transition specified. We do this to proactively exclude poorly-performing platforms like Android 2.x from advanced transitions and ensure they still have a smooth experience. Note that there are platforms such as Android 3.0 that technically support 3D transforms, but still have poor animation performance so this won't guarantee that every browser will be 100% flicker-free but we try to target this responsibly.</p>
 117
 118                 <p>The fallback transition for browsers that don't support 3D transforms can be configured for each transition type, but by default we specify "fade" as the fallback. For example, this will set the fallback transition for the slideout transition to "none":</p>
 119                 <code>$.mobile.transitionFallbacks.slideout = "none"</code>
 120
 121                 <h2>Setting a max width for transitions</h2>
 122                 <p>By default, transitions can be disabled (set to "none") when the window width is greater than a certain pixel width. This feature is useful because transitions can be distracting or perform poorly on larger screens. This value is configurable via the global option <code>$.mobile.maxTransitionWidth</code>, which defaults to <code>false</code>. The option accepts any number representing a pixel width or <code>false</code> value. If it's not <code>false</code>, the handler will use a "none" transition when the window width is wider than the specified value.</p>
 123
 124
 125
 126
 127
 128                 <h2>Creating custom transitions</h2>
 129
 130                 <p>jQuery Mobile allows for the addition of <a href="page-customtransitions.html">custom transitions</a> to the <code>$.mobile.transitionHandlers</code> dictionary so you can expand the selection of transitions on your site or app.
 131
 132
 133
 134
 135
 136                                 </div><!--/content-primary -->
 137
 138                                 <div class="content-secondary">
 139
 140                                         <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
 141
 142                                                         <h3>More in this section</h3>
 143
 144                                                         <ul data-role="listview" data-theme="c" data-dividertheme="d">
 145                                                                 <li data-role="list-divider">Pages &amp; Dialogs</li>
 146                                                                 <li><a href="page-anatomy.html">Anatomy of a page</a></li>
 147                                                                 <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
 148                                                                 <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
 149                                                                 <li><a href="page-titles.html">Page titles</a></li>
 150                                                                 <li><a href="page-links.html">Linking pages</a></li>
 151                                                                 <li data-theme="a"><a href="page-transitions.html">Page transitions</a></li>
 152                                                                 <li><a href="page-dialogs.html">Dialogs</a></li>
 153                                                                 <li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
 154                                                                 <li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
 155                                                                 <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
 156                                                                 <li><a href="page-scripting.html">Scripting pages</a></li>
 157                                                                 <li><a href="phonegap.html">PhoneGap apps</a></li>
 158                                                                 <li><a href="touchoverflow.html">touchOverflow feature</a></li>
 159                                                                 <li><a href="pages-themes.html">Theming pages</a></li>
 160                                                         </ul>
 161                                         </div>
 162                                 </div>
 163
 164                         </div><!-- /content -->
 165
 166                         <div data-role="footer" class="footer-docs" data-theme="c">
 167                                         <p>&copy; 2011-12 The jQuery Foundation</p>
 168                         </div>
 169
 170                         </div><!-- /page -->
 171
 172
 173                         </body>
 174                         </html>