Permalink
Browse files

Updated custom transition page with -moz code, per comment in commit 4…

  • Loading branch information...
1 parent e83878b commit fca6898e1a665124d9434f284e8f6e3c2edc2e0d @Wilto Wilto committed Mar 29, 2012
Showing with 30 additions and 0 deletions.
  1. +30 −0 docs/pages/page-customtransitions.html
@@ -33,12 +33,16 @@
<pre><code>
.slide.in {
-webkit-transform: translateX(0);
+ -moz-transform: translateX(0);
-webkit-animation-name: slideinfromright;
+ -moz-animation-name: slideinfromright;
}
.slide.out {
-webkit-transform: translateX(-100%);
+ -moz-transform: translateX(-100%);
-webkit-animation-name: slideouttoleft;
+ -moz-animation-name: slideouttoleft;
}
@-webkit-keyframes slideinfromright {
@@ -50,6 +54,17 @@
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(-100%); }
}
+
+ @-moz-keyframes slideinfromright {
+ from { -moz-transform: translateX(100%); }
+ to { -moz-transform: translateX(0); }
+ }
+
+ @-moz-keyframes slideouttoleft {
+ from { -moz-transform: translateX(0); }
+ to { -moz-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>
@@ -59,12 +74,16 @@
<pre><code>
.slide.in.reverse {
-webkit-transform: translateX(0);
+ -moz-transform: translateX(0);
-webkit-animation-name: slideinfromleft;
+ -moz-animation-name: slideinfromleft;
}
.slide.out.reverse {
-webkit-transform: translateX(100%);
+ -moz-transform: translateX(100%);
-webkit-animation-name: slideouttoright;
+ -moz-animation-name: slideouttoright;
}
@-webkit-keyframes slideinfromleft {
@@ -76,6 +95,17 @@
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(100%); }
}
+
+ @-moz-keyframes slideinfromleft {
+ from { -moz-transform: translateX(-100%); }
+ to { -moz-transform: translateX(0); }
+ }
+
+ @-moz-keyframes slideouttoright {
+ from { -moz-transform: translateX(0); }
+ to { -moz-transform: translateX(100%); }
+ }
+
</code></pre>
<p>After the CSS rules are in place, you simply specify the name of your transition within the @data-transition attribute of a navigation link:</p>

0 comments on commit fca6898

Please sign in to comment.