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>