Permalink
Browse files

Update docs/pages/page-customtransitions.html

  • Loading branch information...
1 parent 6a13b32 commit 44ee9569377e00ddd751405cfafe6d1c43dcaf0f @agcolom agcolom committed Mar 25, 2012
Showing with 19 additions and 18 deletions.
  1. +19 −18 docs/pages/page-customtransitions.html
@@ -31,24 +31,25 @@
<p>To create a custom CSS transition, select a class name that corresponds to the name of your transition, for example "slide", and then define your "in" and "out" CSS rules to take advantage of transitions or animation keyframes:</p>
<pre><code>
- .slide.in {
- -webkit-transform: translateX(0);
- -webkit-animation-name: slideinfromright;
- }
-
- .slide.out {
- -webkit-transform: translateX(-100%);
- -webkit-animation-name: slideouttoleft;
- }
-
- @-webkit-keyframes slideinfromright {
- from { -webkit-transform: translateX(100%); }
- to { -webkit-transform: translateX(0); }
- }
- @-webkit-keyframes slideouttoleft {
- from { -webkit-transform: translateX(0); }
- to { -webkit-transform: translateX(-100%); }
- }
+ .slide.in {
+ -webkit-transform: translateX(0);
+ -webkit-animation-name: slideinfromright;
+ }
+
+ .slide.out {
+ -webkit-transform: translateX(-100%);
+ -webkit-animation-name: slideouttoleft;
+ }
+
+ @-webkit-keyframes slideinfromright {
+ from { -webkit-transform: translateX(100%); }
+ to { -webkit-transform: translateX(0); }
+ }
+
+ @-webkit-keyframes slideouttoleft {
+ from { -webkit-transform: translateX(0); }
+ to { -webkit-transform: translateX(-100%); }
+ }
</code></pre>
<p>During a CSS-based page transition, jQuery Mobile will place the class name of the transition on both the "from" and "to" pages involved in the transition. It then places an "out" class on the "from" page, and "in" class on the "to" page. The presence of these classes on the "from" and "to" page elements then triggers the animation CSS rules defined above. As of jQuery Mobile version 1.1, animation class additions are queued, rather than simultaneous, producing an out-then-in sequence, which is friendlier for mobile rendering than our previous simultaneous transition sequence.</p>

1 comment on commit 44ee956

Contributor

scottjehl commented on 44ee956 Mar 29, 2012

should we get the -moz keyframes in here too? Just so it matches the code?

Please sign in to comment.