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>
