1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8"> 5 5 <title>HTML5-页面切换动画</title> 6 6 <link href="animations.css" rel="stylesheet"> 7 7 <script src="modernizr.custom.js"></script> 8 8 <script src="jquery-1.8.0.min.js"></script> 9 9 <style> 10 10 #viewsWrapper { 11 11 top:0px; 12 12 left:0px; 13 13 width:300px; 14 14 height:200px; 15 15 position:relative; 16 16 overflow: hidden; 17 17 } 18 18 19 19 #view1 { 20 20 background:#dddd00; 21 21 } 22 22 23 23 #view2 { 24 24 background:#ff00ff; 25 25 } 26 26 27 27 #view3 { 28 28 background:#cc00ff; 29 29 } 30 30 31 31 #view4 { 32 32 background:#00cccc; 33 33 } 34 34 35 35 .pt-page { 36 36 width: 100%; 37 37 height: 100%; 38 38 position: absolute; 39 39 top: 0; 40 40 left: 0; 41 41 visibility: hidden; 42 42 overflow: hidden; 43 43 -webkit-backface-visibility: hidden; 44 44 -moz-backface-visibility: hidden; 45 45 backface-visibility: hidden; 46 46 -webkit-transform: translate3d(0, 0, 0); 47 47 -moz-transform: translate3d(0, 0, 0); 48 48 transform: translate3d(0, 0, 0); 49 49 -webkit-transform-style: preserve-3d; 50 50 -moz-transform-style: preserve-3d; 51 51 transform-style: preserve-3d; 52 52 } 53 53 .pt-page-current, 54 54 .no-js .pt-page { 55 55 visibility: visible; 56 56 z-index: 1; 57 57 } 58 58 </style> 59 59 <script> 60 60 //当前页面移动完毕 61 61 var endCurrPage = false; 62 62 //后续页面移动完毕 63 63 var endNextPage = false; 64 64 //入场动画和出场动画 65 65 var outClass = ''; 66 66 var inClass = ''; 67 67 68 68 var animEndEventNames = { 69 69 'WebkitAnimation' : 'webkitAnimationEnd', 70 70 'OAnimation' : 'oAnimationEnd', 71 71 'msAnimation' : 'MSAnimationEnd', 72 72 'animation' : 'animationend' 73 73 }, 74 74 // animation end event name 75 75 animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ] 76 76 77 77 $(function() { 78 78 //保存各个View的默认class 79 79 $(".pt-page").each( function() { 80 80 var $page = $( this ); 81 81 $page.data( 'originalClassList', $page.attr( 'class' ) ); 82 82 } ); 83 83 //设置默认页面 84 84 $(".pt-page").eq(0).addClass( 'pt-page-current' ); 85 85 86 86 //添加动画样式单选框 87 87 var str = ""; 88 88 for(var i=1;i<=67;i++){ 89 89 str += '<input type="radio" name="myAnimation" value="'+i+'" />效果'+i; 90 90 if(i%7==0){ 91 91 str += "<br/>"; 92 92 } 93 93 } 94 94 $("#radiosDiv").html(str); 95 95 }); 96 96 97 97 //View切换 98 98 function changeView(newView){ 99 99 //设置动画效果 100100 var animationType = $('input:radio[name="myAnimation"]:checked:eq(0)').val(); 101101 getAnimationClass(parseInt(animationType)); 102102 103103 $currPage = $(".pt-page-current").eq(0); 104104 $nextPage = $(newView); 105105 106106 //清除原来添加的动画，层级等样式 107107 //(正常动画结束时会自动清除，这样做防止用户在动画结束前就点击切换其他的) 108108 $(".pt-page").each( function() { 109109 $(this).attr( 'class', $(this).data( 'originalClassList' ) ); 110110 }); 111111 $currPage.addClass("pt-page-current"); 112112 $nextPage.addClass("pt-page-current"); 113113 114114 115115 //如果就是当页则不切换 116116 if($currPage.attr("id") == $nextPage.attr("id")){ 117117 return; 118118 } 119119 120120 //新页面入场 121121 $currPage.addClass(outClass).on( animEndEventName, function() { 122122 $currPage.off( animEndEventName ); 123123 endCurrPage = true; 124124 if( endNextPage ) { 125125 onEndAnimation( $currPage, $nextPage ); 126126 } 127127 } ); 128128 129129 //旧页面出场 130130 $nextPage.addClass(inClass).on( animEndEventName, function() { 131131 $nextPage.off( animEndEventName ); 132132 endNextPage = true; 133133 if( endCurrPage ) { 134134 onEndAnimation( $currPage, $nextPage ); 135135 } 136136 } ); 137137 } 138138 139139 //所有动画都结束后 140140 function onEndAnimation( $outpage, $inpage ) { 141141 endCurrPage = false; 142142 endNextPage = false; 143143 //resetPage( $outpage, $inpage ); 144144 //isAnimating = false; 145145 $outpage.attr( 'class', $outpage.data( 'originalClassList' ) ); 146146 $inpage.attr( 'class', $inpage.data( 'originalClassList' ) + ' pt-page-current' ); 147147 } 148148 149149 function getAnimationClass(animationType) { 150150 switch(animationType) { 151151 case 1: 152152 outClass = 'pt-page-moveToLeft'; 153153 inClass = 'pt-page-moveFromRight'; 154154 break; 155155 case 2: 156156 outClass = 'pt-page-moveToRight'; 157157 inClass = 'pt-page-moveFromLeft'; 158158 break; 159159 case 3: 160160 outClass = 'pt-page-moveToTop'; 161161 inClass = 'pt-page-moveFromBottom'; 162162 break; 163163 case 4: 164164 outClass = 'pt-page-moveToBottom'; 165165 inClass = 'pt-page-moveFromTop'; 166166 break; 167167 case 5: 168168 outClass = 'pt-page-fade'; 169169 inClass = 'pt-page-moveFromRight pt-page-ontop'; 170170 break; 171171 case 6: 172172 outClass = 'pt-page-fade'; 173173 inClass = 'pt-page-moveFromLeft pt-page-ontop'; 174174 break; 175175 case 7: 176176 outClass = 'pt-page-fade'; 177177 inClass = 'pt-page-moveFromBottom pt-page-ontop'; 178178 break; 179179 case 8: 180180 outClass = 'pt-page-fade'; 181181 inClass = 'pt-page-moveFromTop pt-page-ontop'; 182182 break; 183183 case 9: 184184 outClass = 'pt-page-moveToLeftFade'; 185185 inClass = 'pt-page-moveFromRightFade'; 186186 break; 187187 case 10: 188188 outClass = 'pt-page-moveToRightFade'; 189189 inClass = 'pt-page-moveFromLeftFade'; 190190 break; 191191 case 11: 192192 outClass = 'pt-page-moveToTopFade'; 193193 inClass = 'pt-page-moveFromBottomFade'; 194194 break; 195195 case 12: 196196 outClass = 'pt-page-moveToBottomFade'; 197197 inClass = 'pt-page-moveFromTopFade'; 198198 break; 199199 case 13: 200200 outClass = 'pt-page-moveToLeftEasing pt-page-ontop'; 201201 inClass = 'pt-page-moveFromRight'; 202202 break; 203203 case 14: 204204 outClass = 'pt-page-moveToRightEasing pt-page-ontop'; 205205 inClass = 'pt-page-moveFromLeft'; 206206 break; 207207 case 15: 208208 outClass = 'pt-page-moveToTopEasing pt-page-ontop'; 209209 inClass = 'pt-page-moveFromBottom'; 210210 break; 211211 case 16: 212212 outClass = 'pt-page-moveToBottomEasing pt-page-ontop'; 213213 inClass = 'pt-page-moveFromTop'; 214214 break; 215215 case 17: 216216 outClass = 'pt-page-scaleDown'; 217217 inClass = 'pt-page-moveFromRight pt-page-ontop'; 218218 break; 219219 case 18: 220220 outClass = 'pt-page-scaleDown'; 221221 inClass = 'pt-page-moveFromLeft pt-page-ontop'; 222222 break; 223223 case 19: 224224 outClass = 'pt-page-scaleDown'; 225225 inClass = 'pt-page-moveFromBottom pt-page-ontop'; 226226 break; 227227 case 20: 228228 outClass = 'pt-page-scaleDown'; 229229 inClass = 'pt-page-moveFromTop pt-page-ontop'; 230230 break; 231231 case 21: 232232 outClass = 'pt-page-scaleDown'; 233233 inClass = 'pt-page-scaleUpDown pt-page-delay300'; 234234 break; 235235 case 22: 236236 outClass = 'pt-page-scaleDownUp'; 237237 inClass = 'pt-page-scaleUp pt-page-delay300'; 238238 break; 239239 case 23: 240240 outClass = 'pt-page-moveToLeft pt-page-ontop'; 241241 inClass = 'pt-page-scaleUp'; 242242 break; 243243 case 24: 244244 outClass = 'pt-page-moveToRight pt-page-ontop'; 245245 inClass = 'pt-page-scaleUp'; 246246 break; 247247 case 25: 248248 outClass = 'pt-page-moveToTop pt-page-ontop'; 249249 inClass = 'pt-page-scaleUp'; 250250 break; 251251 case 26: 252252 outClass = 'pt-page-moveToBottom pt-page-ontop'; 253253 inClass = 'pt-page-scaleUp'; 254254 break; 255255 case 27: 256256 outClass = 'pt-page-scaleDownCenter'; 257257 inClass = 'pt-page-scaleUpCenter pt-page-delay400'; 258258 break; 259259 case 28: 260260 outClass = 'pt-page-rotateRightSideFirst'; 261261 inClass = 'pt-page-moveFromRight pt-page-delay200 pt-page-ontop'; 262262 break; 263263 case 29: 264264 outClass = 'pt-page-rotateLeftSideFirst'; 265265 inClass = 'pt-page-moveFromLeft pt-page-delay200 pt-page-ontop'; 266266 break; 267267 case 30: 268268 outClass = 'pt-page-rotateTopSideFirst'; 269269 inClass = 'pt-page-moveFromTop pt-page-delay200 pt-page-ontop'; 270270 break; 271271 case 31: 272272 outClass = 'pt-page-rotateBottomSideFirst'; 273273 inClass = 'pt-page-moveFromBottom pt-page-delay200 pt-page-ontop'; 274274 break; 275275 case 32: 276276 outClass = 'pt-page-flipOutRight'; 277277 inClass = 'pt-page-flipInLeft pt-page-delay500'; 278278 break; 279279 case 33: 280280 outClass = 'pt-page-flipOutLeft'; 281281 inClass = 'pt-page-flipInRight pt-page-delay500'; 282282 break; 283283 case 34: 284284 outClass = 'pt-page-flipOutTop'; 285285 inClass = 'pt-page-flipInBottom pt-page-delay500'; 286286 break; 287287 case 35: 288288 outClass = 'pt-page-flipOutBottom'; 289289 inClass = 'pt-page-flipInTop pt-page-delay500'; 290290 break; 291291 case 36: 292292 outClass = 'pt-page-rotateFall pt-page-ontop'; 293293 inClass = 'pt-page-scaleUp'; 294294 break; 295295 case 37: 296296 outClass = 'pt-page-rotateOutNewspaper'; 297297 inClass = 'pt-page-rotateInNewspaper pt-page-delay500'; 298298 break; 299299 case 38: 300300 outClass = 'pt-page-rotatePushLeft'; 301301 inClass = 'pt-page-moveFromRight'; 302302 break; 303303 case 39: 304304 outClass = 'pt-page-rotatePushRight'; 305305 inClass = 'pt-page-moveFromLeft'; 306306 break; 307307 case 40: 308308 outClass = 'pt-page-rotatePushTop'; 309309 inClass = 'pt-page-moveFromBottom'; 310310 break; 311311 case 41: 312312 outClass = 'pt-page-rotatePushBottom'; 313313 inClass = 'pt-page-moveFromTop'; 314314 break; 315315 case 42: 316316 outClass = 'pt-page-rotatePushLeft'; 317317 inClass = 'pt-page-rotatePullRight pt-page-delay180'; 318318 break; 319319 case 43: 320320 outClass = 'pt-page-rotatePushRight'; 321321 inClass = 'pt-page-rotatePullLeft pt-page-delay180'; 322322 break; 323323 case 44: 324324 outClass = 'pt-page-rotatePushTop'; 325325 inClass = 'pt-page-rotatePullBottom pt-page-delay180'; 326326 break; 327327 case 45: 328328 outClass = 'pt-page-rotatePushBottom'; 329329 inClass = 'pt-page-rotatePullTop pt-page-delay180'; 330330 break; 331331 case 46: 332332 outClass = 'pt-page-rotateFoldLeft'; 333333 inClass = 'pt-page-moveFromRightFade'; 334334 break; 335335 case 47: 336336 outClass = 'pt-page-rotateFoldRight'; 337337 inClass = 'pt-page-moveFromLeftFade'; 338338 break; 339339 case 48: 340340 outClass = 'pt-page-rotateFoldTop'; 341341 inClass = 'pt-page-moveFromBottomFade'; 342342 break; 343343 case 49: 344344 outClass = 'pt-page-rotateFoldBottom'; 345345 inClass = 'pt-page-moveFromTopFade'; 346346 break; 347347 case 50: 348348 outClass = 'pt-page-moveToRightFade'; 349349 inClass = 'pt-page-rotateUnfoldLeft'; 350350 break; 351351 case 51: 352352 outClass = 'pt-page-moveToLeftFade'; 353353 inClass = 'pt-page-rotateUnfoldRight'; 354354 break; 355355 case 52: 356356 outClass = 'pt-page-moveToBottomFade'; 357357 inClass = 'pt-page-rotateUnfoldTop'; 358358 break; 359359 case 53: 360360 outClass = 'pt-page-moveToTopFade'; 361361 inClass = 'pt-page-rotateUnfoldBottom'; 362362 break; 363363 case 54: 364364 outClass = 'pt-page-rotateRoomLeftOut pt-page-ontop'; 365365 inClass = 'pt-page-rotateRoomLeftIn'; 366366 break; 367367 case 55: 368368 outClass = 'pt-page-rotateRoomRightOut pt-page-ontop'; 369369 inClass = 'pt-page-rotateRoomRightIn'; 370370 break; 371371 case 56: 372372 outClass = 'pt-page-rotateRoomTopOut pt-page-ontop'; 373373 inClass = 'pt-page-rotateRoomTopIn'; 374374 break; 375375 case 57: 376376 outClass = 'pt-page-rotateRoomBottomOut pt-page-ontop'; 377377 inClass = 'pt-page-rotateRoomBottomIn'; 378378 break; 379379 case 58: 380380 outClass = 'pt-page-rotateCubeLeftOut pt-page-ontop'; 381381 inClass = 'pt-page-rotateCubeLeftIn'; 382382 break; 383383 case 59: 384384 outClass = 'pt-page-rotateCubeRightOut pt-page-ontop'; 385385 inClass = 'pt-page-rotateCubeRightIn'; 386386 break; 387387 case 60: 388388 outClass = 'pt-page-rotateCubeTopOut pt-page-ontop'; 389389 inClass = 'pt-page-rotateCubeTopIn'; 390390 break; 391391 case 61: 392392 outClass = 'pt-page-rotateCubeBottomOut pt-page-ontop'; 393393 inClass = 'pt-page-rotateCubeBottomIn'; 394394 break; 395395 case 62: 396396 outClass = 'pt-page-rotateCarouselLeftOut pt-page-ontop'; 397397 inClass = 'pt-page-rotateCarouselLeftIn'; 398398 break; 399399 case 63: 400400 outClass = 'pt-page-rotateCarouselRightOut pt-page-ontop'; 401401 inClass = 'pt-page-rotateCarouselRightIn'; 402402 break; 403403 case 64: 404404 outClass = 'pt-page-rotateCarouselTopOut pt-page-ontop'; 405405 inClass = 'pt-page-rotateCarouselTopIn'; 406406 break; 407407 case 65: 408408 outClass = 'pt-page-rotateCarouselBottomOut pt-page-ontop'; 409409 inClass = 'pt-page-rotateCarouselBottomIn'; 410410 break; 411411 case 66: 412412 outClass = 'pt-page-rotateSidesOut'; 413413 inClass = 'pt-page-rotateSidesIn pt-page-delay200'; 414414 break; 415415 case 67: 416416 outClass = 'pt-page-rotateSlideOut'; 417417 inClass = 'pt-page-rotateSlideIn'; 418418 break; 419419 } 420420 } 421421 </script> 422422 </head> 423423 <body> 424424 <div id="viewsWrapper"> 425425 <div id="view1" class="pt-page">这个是页面1......</div> 426426 <div id="view2" class="pt-page">这个是页面2......</div> 427427 <div id="view3" class="pt-page">这个是页面3......</div> 428428 <div id="view4" class="pt-page">这个是页面4......</div> 429429 </div> 430430 <br/> 431431 <input type="button" onclick="changeView('#view1')" value="切换页面1"/> 432432 <input type="button" onclick="changeView('#view2')" value="切换页面2"/> 433433 <input type="button" onclick="changeView('#view3')" value="切换页面3"/> 434434 <input type="button" onclick="changeView('#view4')" value="切换页面4"/> 435435 <br/> 436436 <br/> 437437 <div id="radiosDiv"></div> 438438 </body> 439439 </html>
HTML5
Wesley13
2021-10-11
1276 0 0
点赞
收藏
评论区
加载中...