html5场景切换特效,HTML5 - 用CSS3动画制作场景切换效果（移动，旋转，淡入淡出等）...

1

2

3

4

5

HTML5-页面切换动画

6

7

8

9

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

59

60 //当前页面移动完毕

61 varendCurrPage= false;62 //后续页面移动完毕

63 varendNextPage= false;64 //入场动画和出场动画

65 varoutClass= ‘‘;66 varinClass= ‘‘;67

68 varanimEndEventNames={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 varstr= "";88 for(vari=1;i<=67;i++){89 str+= ‘效果‘+i;90 if(i%7==0){91 str+= "
";92 }93 }94 $("#radiosDiv").html(str);95 });96

97 //View切换

98 functionchangeView(newView){99 //设置动画效果

100 varanimationType=$(‘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 functiononEndAnimation( $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 functiongetAnimationClass(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

422

423

424

425 这个是页面1......