HTML5 - 用CSS3動畫製作場景切換效果（移動，旋轉，淡入淡出等）
阿新 • • 發佈：2018-11-05
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>