libs/js/jquery-mobile-1.2.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-spacing: 0; }
  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-transition="none" data-inline="true">page</a></td>
  90                         </tr>
  91                 </table>
  92         <div class="ui-body ui-body-e">
  93             <p><strong>Important:</strong> Some platforms currently have issues with transitions.
  94                 We are working on a solution to solve the problem for everyone.
  95                 If you are experiencing flickers and flashes during or at the end of a transition we suggest the following workaround.
  96                 Please note that this workaround should be throughly tested on the target platform before deployment.
  97                 This workaround is known to cause performance issues, and browser crashes on some platforms especially Android.
  98                 Add the following code to your custom css.
  99             </p>
 100             <code>
 101                 .ui-page { -webkit-backface-visibility: hidden; }
 102             </code>
 103             <p>
 104                 <a rel="external" href="page-transitions-flash-workaround.html">This page</a> has the implemented workaround. <strong>Please test throughly.</strong>
 105             </p>
 106
 107         </div>
 108 <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>
 109
 110 <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>
 111
 112         <h2>Setting a transition on a link or form submit</h2>
 113         <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>
 114
 115 <code><code>
 116 &lt;a href=&quot;index.html&quot; <strong>data-transition=&quot;pop&quot;</strong>&gt;I'll pop&lt;/a&gt;
 117 </code></code>
 118
 119                 <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>
 120
 121                 <h2>Global configuration of transitions</h2>
 122
 123                 <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 be configured.</p>
 124
 125
 126                 <h2>Browser support and performance</h2>
 127                 <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>
 128
 129                 <h2>Defining fallback transitions for non-3D support</h2>
 130                 <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>
 131
 132                 <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>
 133                 <code>$.mobile.transitionFallbacks.slideout = "none"</code>
 134
 135                 <h2>Setting a max scroll for transitions</h2>
 136                 <p>By default, transitions are disabled (set to "none") when you're either coming FROM or going TO a page where the scroll position is 3x the height of the device's screen.
 137                 This feature was added because of the slow response times and the possibility of browser crashing when clicking on a list item (or any navigation element) far down a long page which leads to the
 138                 browser trying to animate a really massively tall page from the scroll position to the top of the screen. The scroll position, not total screen height, is the determining factor for performance.
 139                 This scroll position breakpoint is configurable via the new <code>getMaxScrollForTransition</code> function.</p>
 140
 141                 <h2>Setting a max width for transitions</h2>
 142                 <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 is wider than the specified value.</p>
 143
 144                 <h2>Using same page transition</h2>
 145                 <p>Transitions to the current active page are ignored by default but can be enabled by using the <code>allowSamePageTransition</code> option of the <code>$.mobile.changePage</code> <a href="../api/methods.html">method</a>. Note that not all transitions will work as expected and may end in an impractical result. </p>
 146
 147                 <h2>Creating custom transitions</h2>
 148                 <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.
 149
 150
 151
 152
 153
 154                                 </div><!--/content-primary -->
 155
 156                                 <div class="content-secondary">
 157
 158                                         <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
 159
 160                                                         <h3>More in this section</h3>
 161
 162                                                         <ul data-role="listview" data-theme="c" data-dividertheme="d">
 163                                                                 <li data-role="list-divider">Pages &amp; Dialogs</li>
 164                                                                 <li><a href="page-anatomy.html">Anatomy of a page</a></li>
 165                                                                 <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
 166                                                                 <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
 167                                                                 <li><a href="page-titles.html">Page titles</a></li>
 168                                                                 <li><a href="page-links.html">Linking pages</a></li>
 169                                                                 <li data-theme="a"><a href="page-transitions.html">Page transitions</a></li>
 170                                                                 <li><a href="loader.html">Page loading widget</a></li>
 171                                                                 <li><a href="dialog/index.html">Dialogs</a></li>
 172                                                                 <li><a href="popup/index.html">Popups</a></li>
 173                                                                 <li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
 174                                                                 <li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
 175                                                                 <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
 176                                                                 <li><a href="page-scripting.html">Scripting pages</a></li>
 177                                                                 <li><a href="phonegap.html">PhoneGap apps</a></li>
 178                                                                 <li><a href="touchoverflow.html">touchOverflow feature</a></li>
 179                                                                 <li><a href="pages-themes.html">Theming pages</a></li>
 180                                                         </ul>
 181                                         </div>
 182                                 </div>
 183
 184                         </div><!-- /content -->
 185
 186                         <div data-role="footer" class="footer-docs" data-theme="c">
 187                                         <p class="jqm-version"></p>
 188                                 <p>&copy; 2012 jQuery Foundation and other contributors</p>
 189                         </div>
 190
 191                         </div><!-- /page -->
 192
 193
 194                         </body>
 195                         </html>