Skip to content

Commit 1f5fcda

Browse files
toddparkertoddparker
committed
Moved all the custom CSS transition code into the custom file to make the transition page simpler
1 parent 2c34b82 commit 1f5fcda

File tree

2 files changed

+81
-78
lines changed

2 files changed

+81
-78
lines changed

‎docs/pages/page-customtransitions.html

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,84 @@ <h1>Transitions</h1>
2222
<div data-role="content">
2323
<div class="content-primary">
2424

25+
<h2>Creating custom CSS-based transitions</h2>
26+
27+
28+
<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>
29+
30+
<pre><code>.slide.in {
31+
-webkit-transform: translateX(0);
32+
-webkit-animation-name: slideinfromright;
33+
}
34+
35+
.slide.out {
36+
-webkit-transform: translateX(-100%);
37+
-webkit-animation-name: slideouttoleft;
38+
}
39+
40+
@-webkit-keyframes slideinfromright {
41+
from { -webkit-transform: translateX(100%); }
42+
to { -webkit-transform: translateX(0); }
43+
}
44+
@-webkit-keyframes slideouttoleft {
45+
from { -webkit-transform: translateX(0); }
46+
to { -webkit-transform: translateX(-100%); }
47+
}
48+
</code></pre>
49+
50+
<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>
51+
52+
<p>If your transition supports a reverse direction, you need to create CSS rules that use the <code>reverse</code> class in addition to the transition class name and the "in" and "out" classes:</p>
53+
54+
<pre><code>.slide.in.reverse {
55+
-webkit-transform: translateX(0);
56+
-webkit-animation-name: slideinfromleft;
57+
}
58+
59+
.slide.out.reverse {
60+
-webkit-transform: translateX(100%);
61+
-webkit-animation-name: slideouttoright;
62+
}
63+
64+
@-webkit-keyframes slideinfromleft {
65+
from { -webkit-transform: translateX(-100%); }
66+
to { -webkit-transform: translateX(0); }
67+
}
68+
69+
@-webkit-keyframes slideouttoright {
70+
from { -webkit-transform: translateX(0); }
71+
to { -webkit-transform: translateX(100%); }
72+
}
73+
</code></pre>
74+
75+
<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>
76+
77+
<pre><code>&lt;a href="#page2" data-transition="slide"&gt;Page 2&lt;/a&gt;
78+
</code></pre>
79+
80+
<p>When the user clicks on the navigation link, jQuery Mobile will invoke your transition when it navigates to the page mentioned within the link.</p>
81+
82+
<p>In case you were wondering why none of the CSS rules above specified any easing or duration, it's because the CSS for jQuery Mobile defines the default easing and duration in the following rules:</p>
83+
84+
<pre><code>
85+
.in {
86+
-webkit-animation-timing-function: ease-out;
87+
-webkit-animation-duration: 350ms;
88+
-moz-animation-timing-function: ease-out;
89+
-moz-animation-duration: 350ms;
90+
}
91+
92+
.out {
93+
-webkit-animation-timing-function: ease-in;
94+
-webkit-animation-duration: 225ms;
95+
-moz-animation-timing-function: ease-in;
96+
-moz-animation-duration: 225;
97+
}
98+
</code></pre>
99+
100+
<p>If you need to specify a different easing or duration, simply add the appropriate CSS3 property to your custom page transition rules.</p>
101+
102+
25103
<h2>Creating custom JavaScript-based transitions</h2>
26104

27105
<p>When a user clicks on a link within a page, jQuery Mobile checks if the link specifies a <code>@data-transition</code> attribute. The value of this attribute is the name of the transition to use when displaying the page referred to by the link. If there is no <code>@data-transition</code> attribute, the transition name specified by the configuration option <code>$.mobile.defaultPageTransition</code> is used for pages, and <code>$.mobile.defaultDialogTransition</code> is used for dialogs.</p>

‎docs/pages/page-transitions.html

Lines changed: 3 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -115,86 +115,11 @@ <h2>Setting a max width for transitions</h2>
115115

116116

117117

118-
<h2>Creating custom CSS-based transitions</h2>
119-
120-
121-
<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>
122-
123-
<pre><code>.slide.in {
124-
-webkit-transform: translateX(0);
125-
-webkit-animation-name: slideinfromright;
126-
}
127-
128-
.slide.out {
129-
-webkit-transform: translateX(-100%);
130-
-webkit-animation-name: slideouttoleft;
131-
}
132-
133-
@-webkit-keyframes slideinfromright {
134-
from { -webkit-transform: translateX(100%); }
135-
to { -webkit-transform: translateX(0); }
136-
}
137-
@-webkit-keyframes slideouttoleft {
138-
from { -webkit-transform: translateX(0); }
139-
to { -webkit-transform: translateX(-100%); }
140-
}
141-
</code></pre>
142-
143-
<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>
144-
145-
<p>If your transition supports a reverse direction, you need to create CSS rules that use the <code>reverse</code> class in addition to the transition class name and the "in" and "out" classes:</p>
146-
147-
<pre><code>.slide.in.reverse {
148-
-webkit-transform: translateX(0);
149-
-webkit-animation-name: slideinfromleft;
150-
}
151-
152-
.slide.out.reverse {
153-
-webkit-transform: translateX(100%);
154-
-webkit-animation-name: slideouttoright;
155-
}
156-
157-
@-webkit-keyframes slideinfromleft {
158-
from { -webkit-transform: translateX(-100%); }
159-
to { -webkit-transform: translateX(0); }
160-
}
161-
162-
@-webkit-keyframes slideouttoright {
163-
from { -webkit-transform: translateX(0); }
164-
to { -webkit-transform: translateX(100%); }
165-
}
166-
</code></pre>
167-
168-
<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>
169-
170-
<pre><code>&lt;a href="#page2" data-transition="slide"&gt;Page 2&lt;/a&gt;
171-
</code></pre>
172-
173-
<p>When the user clicks on the navigation link, jQuery Mobile will invoke your transition when it navigates to the page mentioned within the link.</p>
174-
175-
<p>In case you were wondering why none of the CSS rules above specified any easing or duration, it's because the CSS for jQuery Mobile defines the default easing and duration in the following rules:</p>
176-
177-
<pre><code>
178-
.in {
179-
-webkit-animation-timing-function: ease-out;
180-
-webkit-animation-duration: 350ms;
181-
-moz-animation-timing-function: ease-out;
182-
-moz-animation-duration: 350ms;
183-
}
184-
185-
.out {
186-
-webkit-animation-timing-function: ease-in;
187-
-webkit-animation-duration: 225ms;
188-
-moz-animation-timing-function: ease-in;
189-
-moz-animation-duration: 225;
190-
}
191-
</code></pre>
192-
193-
<p>If you need to specify a different easing or duration, simply add the appropriate CSS3 property to your custom page transition rules.</p>
118+
194119

195-
<h2>Creating custom JavaScript-based transitions</h2>
120+
<h2>Creating custom transitions</h2>
196121

197-
<p>jQuery Mobile allows for the addition of <a href="page-customtransitions.html">custom transitions</a> to the <code>$.mobile.transitionHandlers</code> dictionary.
122+
<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.
198123

199124
<h2>Transitions and scroll position</h2>
200125
<p>One of the key things jQuery Mobile does is store your scroll position before starting a transition so it can restore you to the same place once you return to the page when hitting the Back button or closing a dialog. Here are the same buttons from the top to test the scrolling logic.</p>

0 commit comments

Comments
 (0)