Skip to content

Commit 3120f53

Browse files
committed
Merge pull request jquery-archive#3914 from agcolom/patch-67
Update docs/pages/page-customtransitions.html
2 parents 6a13b32 + 44ee956 commit 3120f53

File tree

1 file changed

+19
-18
lines changed

1 file changed

+19
-18
lines changed

docs/pages/page-customtransitions.html

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -31,24 +31,25 @@ <h2>Creating custom CSS-based transitions</h2>
3131
<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>
3232

3333
<pre><code>
34-
.slide.in {
35-
-webkit-transform: translateX(0);
36-
-webkit-animation-name: slideinfromright;
37-
}
38-
39-
.slide.out {
40-
-webkit-transform: translateX(-100%);
41-
-webkit-animation-name: slideouttoleft;
42-
}
43-
44-
@-webkit-keyframes slideinfromright {
45-
from { -webkit-transform: translateX(100%); }
46-
to { -webkit-transform: translateX(0); }
47-
}
48-
@-webkit-keyframes slideouttoleft {
49-
from { -webkit-transform: translateX(0); }
50-
to { -webkit-transform: translateX(-100%); }
51-
}
34+
.slide.in {
35+
-webkit-transform: translateX(0);
36+
-webkit-animation-name: slideinfromright;
37+
}
38+
39+
.slide.out {
40+
-webkit-transform: translateX(-100%);
41+
-webkit-animation-name: slideouttoleft;
42+
}
43+
44+
@-webkit-keyframes slideinfromright {
45+
from { -webkit-transform: translateX(100%); }
46+
to { -webkit-transform: translateX(0); }
47+
}
48+
49+
@-webkit-keyframes slideouttoleft {
50+
from { -webkit-transform: translateX(0); }
51+
to { -webkit-transform: translateX(-100%); }
52+
}
5253
</code></pre>
5354

5455
<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>

0 commit comments

Comments
 (0)