1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>HTML5-页面切换动画</title>
6 <link href="animations.css" rel="stylesheet">
7 <script src="modernizr.custom.js"></script>
8 <script src="jquery-1.8.0.min.js"></script>
9 <style>
10 #viewsWrapper {
11 top:0px;
12 left:0px;
13 width:300px;
14 height:200px;
15 position:relative;
16 overflow: hidden;
17 }
18
19 #view1 {
20 background:#dddd00;
21 }
22
23 #view2 {
24 background:#ff00ff;
25 }
26
27 #view3 {
28 background:#cc00ff;
29 }
30
31 #view4 {
32 background:#00cccc;
33 }
34
35 .pt-page {
36 width: 100%;
37 height: 100%;
38 position: absolute;
39 top: 0;
40 left: 0;
41 visibility: hidden;
42 overflow: hidden;
43 -webkit-backface-visibility: hidden;
44 -moz-backface-visibility: hidden;
45 backface-visibility: hidden;
46 -webkit-transform: translate3d(0, 0, 0);
47 -moz-transform: translate3d(0, 0, 0);
48 transform: translate3d(0, 0, 0);
49 -webkit-transform-style: preserve-3d;
50 -moz-transform-style: preserve-3d;
51 transform-style: preserve-3d;
52 }
53 .pt-page-current,
54 .no-js .pt-page {
55 visibility: visible;
56 z-index: 1;
57 }
58 </style>
59 <script>
60 //当前页面移动完毕
61 var endCurrPage = false;
62 //后续页面移动完毕
63 var endNextPage = false;
64 //入场动画和出场动画
65 var outClass = ‘‘;
66 var inClass = ‘‘;
67
68 var animEndEventNames = {
69 ‘WebkitAnimation‘ : ‘webkitAnimationEnd‘,
70 ‘OAnimation‘ : ‘oAnimationEnd‘,
71 ‘msAnimation‘ : ‘MSAnimationEnd‘,
72 ‘animation‘ : ‘animationend‘
73 },
74 // animation end event name
75 animEndEventName = animEndEventNames[ Modernizr.prefixed( ‘animation‘ ) ]
76
77 $(function() {
78 //保存各个View的默认class
79 $(".pt-page").each( function() {
80 var $page = $( this );
81 $page.data( ‘originalClassList‘, $page.attr( ‘class‘ ) );
82 } );
83 //设置默认页面
84 $(".pt-page").eq(0).addClass( ‘pt-page-current‘ );
85
86 //添加动画样式单选框
87 var str = "";
88 for(var i=1;i<=67;i++){
89 str += ‘<input type="radio" name="myAnimation" value="‘+i+‘" />效果‘+i;
90 if(i%7==0){
91 str += "<br/>";
92 }
93 }
94 $("#radiosDiv").html(str);
95 });
96
97 //View切换
98 function changeView(newView){
99 //设置动画效果
100 var animationType = $(‘input:radio[name="myAnimation"]:checked:eq(0)‘).val();
101 getAnimationClass(parseInt(animationType));
102
103 $currPage = $(".pt-page-current").eq(0);
104 $nextPage = $(newView);
105
106 //清除原来添加的动画，层级等样式
107 //(正常动画结束时会自动清除，这样做防止用户在动画结束前就点击切换其他的)
108 $(".pt-page").each( function() {
109 $(this).attr( ‘class‘, $(this).data( ‘originalClassList‘ ) );
110 });
111 $currPage.addClass("pt-page-current");
112 $nextPage.addClass("pt-page-current");
113
114
115 //如果就是当页则不切换
116 if($currPage.attr("id") == $nextPage.attr("id")){
117 return;
118 }
119
120 //新页面入场
121 $currPage.addClass(outClass).on( animEndEventName, function() {
122 $currPage.off( animEndEventName );
123 endCurrPage = true;
124 if( endNextPage ) {
125 onEndAnimation( $currPage, $nextPage );
126 }
127 } );
128
129 //旧页面出场
130 $nextPage.addClass(inClass).on( animEndEventName, function() {
131 $nextPage.off( animEndEventName );
132 endNextPage = true;
133 if( endCurrPage ) {
134 onEndAnimation( $currPage, $nextPage );
135 }
136 } );
137 }
138
139 //所有动画都结束后
140 function onEndAnimation( $outpage, $inpage ) {
141 endCurrPage = false;
142 endNextPage = false;
143 //resetPage( $outpage, $inpage );
144 //isAnimating = false;
145 $outpage.attr( ‘class‘, $outpage.data( ‘originalClassList‘ ) );
146 $inpage.attr( ‘class‘, $inpage.data( ‘originalClassList‘ ) + ‘ pt-page-current‘ );
147 }
148
149 function getAnimationClass(animationType) {
150 switch(animationType) {
151 case 1:
152 outClass = ‘pt-page-moveToLeft‘;
153 inClass = ‘pt-page-moveFromRight‘;
154 break;
155 case 2:
156 outClass = ‘pt-page-moveToRight‘;
157 inClass = ‘pt-page-moveFromLeft‘;
158 break;
159 case 3:
160 outClass = ‘pt-page-moveToTop‘;
161 inClass = ‘pt-page-moveFromBottom‘;
162 break;
163 case 4:
164 outClass = ‘pt-page-moveToBottom‘;
165 inClass = ‘pt-page-moveFromTop‘;
166 break;
167 case 5:
168 outClass = ‘pt-page-fade‘;
169 inClass = ‘pt-page-moveFromRight pt-page-ontop‘;
170 break;
171 case 6:
172 outClass = ‘pt-page-fade‘;
173 inClass = ‘pt-page-moveFromLeft pt-page-ontop‘;
174 break;
175 case 7:
176 outClass = ‘pt-page-fade‘;
177 inClass = ‘pt-page-moveFromBottom pt-page-ontop‘;
178 break;
179 case 8:
180 outClass = ‘pt-page-fade‘;
181 inClass = ‘pt-page-moveFromTop pt-page-ontop‘;
182 break;
183 case 9:
184 outClass = ‘pt-page-moveToLeftFade‘;
185 inClass = ‘pt-page-moveFromRightFade‘;
186 break;
187 case 10:
188 outClass = ‘pt-page-moveToRightFade‘;
189 inClass = ‘pt-page-moveFromLeftFade‘;
190 break;
191 case 11:
192 outClass = ‘pt-page-moveToTopFade‘;
193 inClass = ‘pt-page-moveFromBottomFade‘;
194 break;
195 case 12:
196 outClass = ‘pt-page-moveToBottomFade‘;
197 inClass = ‘pt-page-moveFromTopFade‘;
198 break;
199 case 13:
200 outClass = ‘pt-page-moveToLeftEasing pt-page-ontop‘;
201 inClass = ‘pt-page-moveFromRight‘;
202 break;
203 case 14:
204 outClass = ‘pt-page-moveToRightEasing pt-page-ontop‘;
205 inClass = ‘pt-page-moveFromLeft‘;
206 break;
207 case 15:
208 outClass = ‘pt-page-moveToTopEasing pt-page-ontop‘;
209 inClass = ‘pt-page-moveFromBottom‘;
210 break;
211 case 16:
212 outClass = ‘pt-page-moveToBottomEasing pt-page-ontop‘;
213 inClass = ‘pt-page-moveFromTop‘;
214 break;
215 case 17:
216 outClass = ‘pt-page-scaleDown‘;
217 inClass = ‘pt-page-moveFromRight pt-page-ontop‘;
218 break;
219 case 18:
220 outClass = ‘pt-page-scaleDown‘;
221 inClass = ‘pt-page-moveFromLeft pt-page-ontop‘;
222 break;
223 case 19:
224 outClass = ‘pt-page-scaleDown‘;
225 inClass = ‘pt-page-moveFromBottom pt-page-ontop‘;
226 break;
227 case 20:
228 outClass = ‘pt-page-scaleDown‘;
229 inClass = ‘pt-page-moveFromTop pt-page-ontop‘;
230 break;
231 case 21:
232 outClass = ‘pt-page-scaleDown‘;
233 inClass = ‘pt-page-scaleUpDown pt-page-delay300‘;
234 break;
235 case 22:
236 outClass = ‘pt-page-scaleDownUp‘;
237 inClass = ‘pt-page-scaleUp pt-page-delay300‘;
238 break;
239 case 23:
240 outClass = ‘pt-page-moveToLeft pt-page-ontop‘;
241 inClass = ‘pt-page-scaleUp‘;
242 break;
243 case 24:
244 outClass = ‘pt-page-moveToRight pt-page-ontop‘;
245 inClass = ‘pt-page-scaleUp‘;
246 break;
247 case 25:
248 outClass = ‘pt-page-moveToTop pt-page-ontop‘;
249 inClass = ‘pt-page-scaleUp‘;
250 break;
251 case 26:
252 outClass = ‘pt-page-moveToBottom pt-page-ontop‘;
253 inClass = ‘pt-page-scaleUp‘;
254 break;
255 case 27:
256 outClass = ‘pt-page-scaleDownCenter‘;
257 inClass = ‘pt-page-scaleUpCenter pt-page-delay400‘;
258 break;
259 case 28:
260 outClass = ‘pt-page-rotateRightSideFirst‘;
261 inClass = ‘pt-page-moveFromRight pt-page-delay200 pt-page-ontop‘;
262 break;
263 case 29:
264 outClass = ‘pt-page-rotateLeftSideFirst‘;
265 inClass = ‘pt-page-moveFromLeft pt-page-delay200 pt-page-ontop‘;
266 break;
267 case 30:
268 outClass = ‘pt-page-rotateTopSideFirst‘;
269 inClass = ‘pt-page-moveFromTop pt-page-delay200 pt-page-ontop‘;
270 break;
271 case 31:
272 outClass = ‘pt-page-rotateBottomSideFirst‘;
273 inClass = ‘pt-page-moveFromBottom pt-page-delay200 pt-page-ontop‘;
274 break;
275 case 32:
276 outClass = ‘pt-page-flipOutRight‘;
277 inClass = ‘pt-page-flipInLeft pt-page-delay500‘;
278 break;
279 case 33:
280 outClass = ‘pt-page-flipOutLeft‘;
281 inClass = ‘pt-page-flipInRight pt-page-delay500‘;
282 break;
283 case 34:
284 outClass = ‘pt-page-flipOutTop‘;
285 inClass = ‘pt-page-flipInBottom pt-page-delay500‘;
286 break;
287 case 35:
288 outClass = ‘pt-page-flipOutBottom‘;
289 inClass = ‘pt-page-flipInTop pt-page-delay500‘;
290 break;
291 case 36:
292 outClass = ‘pt-page-rotateFall pt-page-ontop‘;
293 inClass = ‘pt-page-scaleUp‘;
294 break;
295 case 37:
296 outClass = ‘pt-page-rotateOutNewspaper‘;
297 inClass = ‘pt-page-rotateInNewspaper pt-page-delay500‘;
298 break;
299 case 38:
300 outClass = ‘pt-page-rotatePushLeft‘;
301 inClass = ‘pt-page-moveFromRight‘;
302 break;
303 case 39:
304 outClass = ‘pt-page-rotatePushRight‘;
305 inClass = ‘pt-page-moveFromLeft‘;
306 break;
307 case 40:
308 outClass = ‘pt-page-rotatePushTop‘;
309 inClass = ‘pt-page-moveFromBottom‘;
310 break;
311 case 41:
312 outClass = ‘pt-page-rotatePushBottom‘;
313 inClass = ‘pt-page-moveFromTop‘;
314 break;
315 case 42:
316 outClass = ‘pt-page-rotatePushLeft‘;
317 inClass = ‘pt-page-rotatePullRight pt-page-delay180‘;
318 break;
319 case 43:
320 outClass = ‘pt-page-rotatePushRight‘;
321 inClass = ‘pt-page-rotatePullLeft pt-page-delay180‘;
322 break;
323 case 44:
324 outClass = ‘pt-page-rotatePushTop‘;
325 inClass = ‘pt-page-rotatePullBottom pt-page-delay180‘;
326 break;
327 case 45:
328 outClass = ‘pt-page-rotatePushBottom‘;
329 inClass = ‘pt-page-rotatePullTop pt-page-delay180‘;
330 break;
331 case 46:
332 outClass = ‘pt-page-rotateFoldLeft‘;
333 inClass = ‘pt-page-moveFromRightFade‘;
334 break;
335 case 47:
336 outClass = ‘pt-page-rotateFoldRight‘;
337 inClass = ‘pt-page-moveFromLeftFade‘;
338 break;
339 case 48:
340 outClass = ‘pt-page-rotateFoldTop‘;
341 inClass = ‘pt-page-moveFromBottomFade‘;
342 break;
343 case 49:
344 outClass = ‘pt-page-rotateFoldBottom‘;
345 inClass = ‘pt-page-moveFromTopFade‘;
346 break;
347 case 50:
348 outClass = ‘pt-page-moveToRightFade‘;
349 inClass = ‘pt-page-rotateUnfoldLeft‘;
350 break;
351 case 51:
352 outClass = ‘pt-page-moveToLeftFade‘;
353 inClass = ‘pt-page-rotateUnfoldRight‘;
354 break;
355 case 52:
356 outClass = ‘pt-page-moveToBottomFade‘;
357 inClass = ‘pt-page-rotateUnfoldTop‘;
358 break;
359 case 53:
360 outClass = ‘pt-page-moveToTopFade‘;
361 inClass = ‘pt-page-rotateUnfoldBottom‘;
362 break;
363 case 54:
364 outClass = ‘pt-page-rotateRoomLeftOut pt-page-ontop‘;
365 inClass = ‘pt-page-rotateRoomLeftIn‘;
366 break;
367 case 55:
368 outClass = ‘pt-page-rotateRoomRightOut pt-page-ontop‘;
369 inClass = ‘pt-page-rotateRoomRightIn‘;
370 break;
371 case 56:
372 outClass = ‘pt-page-rotateRoomTopOut pt-page-ontop‘;
373 inClass = ‘pt-page-rotateRoomTopIn‘;
374 break;
375 case 57:
376 outClass = ‘pt-page-rotateRoomBottomOut pt-page-ontop‘;
377 inClass = ‘pt-page-rotateRoomBottomIn‘;
378 break;
379 case 58:
380 outClass = ‘pt-page-rotateCubeLeftOut pt-page-ontop‘;
381 inClass = ‘pt-page-rotateCubeLeftIn‘;
382 break;
383 case 59:
384 outClass = ‘pt-page-rotateCubeRightOut pt-page-ontop‘;
385 inClass = ‘pt-page-rotateCubeRightIn‘;
386 break;
387 case 60:
388 outClass = ‘pt-page-rotateCubeTopOut pt-page-ontop‘;
389 inClass = ‘pt-page-rotateCubeTopIn‘;
390 break;
391 case 61:
392 outClass = ‘pt-page-rotateCubeBottomOut pt-page-ontop‘;
393 inClass = ‘pt-page-rotateCubeBottomIn‘;
394 break;
395 case 62:
396 outClass = ‘pt-page-rotateCarouselLeftOut pt-page-ontop‘;
397 inClass = ‘pt-page-rotateCarouselLeftIn‘;
398 break;
399 case 63:
400 outClass = ‘pt-page-rotateCarouselRightOut pt-page-ontop‘;
401 inClass = ‘pt-page-rotateCarouselRightIn‘;
402 break;
403 case 64:
404 outClass = ‘pt-page-rotateCarouselTopOut pt-page-ontop‘;
405 inClass = ‘pt-page-rotateCarouselTopIn‘;
406 break;
407 case 65:
408 outClass = ‘pt-page-rotateCarouselBottomOut pt-page-ontop‘;
409 inClass = ‘pt-page-rotateCarouselBottomIn‘;
410 break;
411 case 66:
412 outClass = ‘pt-page-rotateSidesOut‘;
413 inClass = ‘pt-page-rotateSidesIn pt-page-delay200‘;
414 break;
415 case 67:
416 outClass = ‘pt-page-rotateSlideOut‘;
417 inClass = ‘pt-page-rotateSlideIn‘;
418 break;
419 }
420 }
421 </script>
422 </head>
423 <body>
424 <div id="viewsWrapper">
425 <div id="view1" class="pt-page">这个是页面1......</div>
426 <div id="view2" class="pt-page">这个是页面2......</div>
427 <div id="view3" class="pt-page">这个是页面3......</div>
428 <div id="view4" class="pt-page">这个是页面4......</div>
429 </div>
430 <br/>
431 <input type="button" onclick="changeView(‘#view1‘)" value="切换页面1"/>
432 <input type="button" onclick="changeView(‘#view2‘)" value="切换页面2"/>
433 <input type="button" onclick="changeView(‘#view3‘)" value="切换页面3"/>
434 <input type="button" onclick="changeView(‘#view4‘)" value="切换页面4"/>
435 <br/>
436 <br/>
437 <div id="radiosDiv"></div>
438 </body>
439 </html>
HTML5 - 用CSS3动画制作场景切换效果（移动，旋转，淡入淡出等）