上面这个连接点击进去，会有一个demo，里面又60多种场景切换的动画。代码简单，你可以根据自己的需求选择动画。
两个场景（即两个div视图）切换的时候，如果想添加个过渡动画，除了可以使用js来实现，还可以通过CSS3的animation属性来实现。
（注意：Internet Explorer 9 以及更早的版本不支持 animation 属性。）
下面做了个过渡动画汇总，包含常见的动画效果，效果图如下：
代码如下：
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>HTML5-页面切换动画</title>
<link href="animations.css" rel="stylesheet">
<script src="modernizr.custom.js"></script>
<script src="jquery-1.8.0.min.js"></script>
<style>
#viewsWrapper { top:0px; left:0px; width:300px; height:200px; position:relative; overflow: hidden; }
#view1 { background:#dddd00; }
#view2 { background:#ff00ff; }
#view3 { background:#cc00ff; }
#view4 { background:#00cccc; }
.pt-page { width: 100%; height: 100%; position: absolute; top: 0; left: 0; visibility: hidden; overflow: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; }
.pt-page-current, .no-js .pt-page { visibility: visible; z-index: 1; }
</style>
<script>
//当前页面移动完毕
var endCurrPage = false; //后续页面移动完毕
var endNextPage = false; //入场动画和出场动画
var outClass = ''; var inClass = ''; var animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend'
}, // animation end event name
animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ]
$(function() {
//保存各个View的默认class
$(".pt-page").each( function() {
var $page = $( this );
$page.data( 'originalClassList', $page.attr( 'class' ) );
} ); //设置默认页面
$(".pt-page").eq(0).addClass( 'pt-page-current' ); //添加动画样式单选框
var str = ""; for(var i=1;i<=67;i++){
str += '<input type="radio" name="myAnimation" value="'+i+'" />效果'+i; if(i%7==0){
str += "<br/>";
}
}
$("#radiosDiv").html(str);
}); //View切换
function changeView(newView){
//设置动画效果
var animationType = $('input:radio[name="myAnimation"]:checked:eq(0)').val();
getAnimationClass(parseInt(animationType));
$currPage = $(".pt-page-current").eq(0);
$nextPage = $(newView); //清除原来添加的动画，层级等样式
//(正常动画结束时会自动清除，这样做防止用户在动画结束前就点击切换其他的)
$(".pt-page").each( function() {
$(this).attr( 'class', $(this).data( 'originalClassList' ) );
});
$currPage.addClass("pt-page-current");
$nextPage.addClass("pt-page-current"); //如果就是当页则不切换
if($currPage.attr("id") == $nextPage.attr("id")){ return;
} //新页面入场
$currPage.addClass(outClass).on( animEndEventName, function() {
$currPage.off( animEndEventName );
endCurrPage = true; if( endNextPage ) {
onEndAnimation( $currPage, $nextPage );
}
} ); //旧页面出场
$nextPage.addClass(inClass).on( animEndEventName, function() {
$nextPage.off( animEndEventName );
endNextPage = true; if( endCurrPage ) {
onEndAnimation( $currPage, $nextPage );
}
} );
} //所有动画都结束后
function onEndAnimation( $outpage, $inpage ) {
endCurrPage = false;
endNextPage = false; //resetPage( $outpage, $inpage );
//isAnimating = false;
$outpage.attr( 'class', $outpage.data( 'originalClassList' ) );
$inpage.attr( 'class', $inpage.data( 'originalClassList' ) + ' pt-page-current' );
}
function getAnimationClass(animationType) {
switch(animationType) { case 1:
outClass = 'pt-page-moveToLeft';
inClass = 'pt-page-moveFromRight'; break; case 2:
outClass = 'pt-page-moveToRight';
inClass = 'pt-page-moveFromLeft'; break; case 3:
outClass = 'pt-page-moveToTop';
inClass = 'pt-page-moveFromBottom'; break; case 4:
outClass = 'pt-page-moveToBottom';
inClass = 'pt-page-moveFromTop'; break; case 5:
outClass = 'pt-page-fade';
inClass = 'pt-page-moveFromRight pt-page-ontop'; break; case 6:
outClass = 'pt-page-fade';
inClass = 'pt-page-moveFromLeft pt-page-ontop'; break; case 7:
outClass = 'pt-page-fade';
inClass = 'pt-page-moveFromBottom pt-page-ontop'; break; case 8:
outClass = 'pt-page-fade';
inClass = 'pt-page-moveFromTop pt-page-ontop'; break; case 9:
outClass = 'pt-page-moveToLeftFade';
inClass = 'pt-page-moveFromRightFade'; break; case 10:
outClass = 'pt-page-moveToRightFade';
inClass = 'pt-page-moveFromLeftFade'; break; case 11:
outClass = 'pt-page-moveToTopFade';
inClass = 'pt-page-moveFromBottomFade'; break; case 12:
outClass = 'pt-page-moveToBottomFade';
inClass = 'pt-page-moveFromTopFade'; break; case 13:
outClass = 'pt-page-moveToLeftEasing pt-page-ontop';
inClass = 'pt-page-moveFromRight'; break; case 14:
outClass = 'pt-page-moveToRightEasing pt-page-ontop';
inClass = 'pt-page-moveFromLeft'; break; case 15:
outClass = 'pt-page-moveToTopEasing pt-page-ontop';
inClass = 'pt-page-moveFromBottom'; break; case 16:
outClass = 'pt-page-moveToBottomEasing pt-page-ontop';
inClass = 'pt-page-moveFromTop'; break; case 17:
outClass = 'pt-page-scaleDown';
inClass = 'pt-page-moveFromRight pt-page-ontop'; break; case 18:
outClass = 'pt-page-scaleDown';
inClass = 'pt-page-moveFromLeft pt-page-ontop'; break; case 19:
outClass = 'pt-page-scaleDown';
inClass = 'pt-page-moveFromBottom pt-page-ontop'; break; case 20:
outClass = 'pt-page-scaleDown';
inClass = 'pt-page-moveFromTop pt-page-ontop'; break; case 21:
outClass = 'pt-page-scaleDown';
inClass = 'pt-page-scaleUpDown pt-page-delay300'; break; case 22:
outClass = 'pt-page-scaleDownUp';
inClass = 'pt-page-scaleUp pt-page-delay300'; break; case 23:
outClass = 'pt-page-moveToLeft pt-page-ontop';
inClass = 'pt-page-scaleUp'; break; case 24:
outClass = 'pt-page-moveToRight pt-page-ontop';
inClass = 'pt-page-scaleUp'; break; case 25:
outClass = 'pt-page-moveToTop pt-page-ontop';
inClass = 'pt-page-scaleUp'; break; case 26:
outClass = 'pt-page-moveToBottom pt-page-ontop';
inClass = 'pt-page-scaleUp'; break; case 27:
outClass = 'pt-page-scaleDownCenter';
inClass = 'pt-page-scaleUpCenter pt-page-delay400'; break; case 28:
outClass = 'pt-page-rotateRightSideFirst';
inClass = 'pt-page-moveFromRight pt-page-delay200 pt-page-ontop'; break; case 29:
outClass = 'pt-page-rotateLeftSideFirst';
inClass = 'pt-page-moveFromLeft pt-page-delay200 pt-page-ontop'; break; case 30:
outClass = 'pt-page-rotateTopSideFirst';
inClass = 'pt-page-moveFromTop pt-page-delay200 pt-page-ontop'; break; case 31:
outClass = 'pt-page-rotateBottomSideFirst';
inClass = 'pt-page-moveFromBottom pt-page-delay200 pt-page-ontop'; break; case 32:
outClass = 'pt-page-flipOutRight';
inClass = 'pt-page-flipInLeft pt-page-delay500'; break; case 33:
outClass = 'pt-page-flipOutLeft';
inClass = 'pt-page-flipInRight pt-page-delay500'; break; case 34:
outClass = 'pt-page-flipOutTop';
inClass = 'pt-page-flipInBottom pt-page-delay500'; break; case 35:
outClass = 'pt-page-flipOutBottom';
inClass = 'pt-page-flipInTop pt-page-delay500'; break; case 36:
outClass = 'pt-page-rotateFall pt-page-ontop';
inClass = 'pt-page-scaleUp'; break; case 37:
outClass = 'pt-page-rotateOutNewspaper';
inClass = 'pt-page-rotateInNewspaper pt-page-delay500'; break; case 38:
outClass = 'pt-page-rotatePushLeft';
inClass = 'pt-page-moveFromRight'; break; case 39:
outClass = 'pt-page-rotatePushRight';
inClass = 'pt-page-moveFromLeft'; break; case 40:
outClass = 'pt-page-rotatePushTop';
inClass = 'pt-page-moveFromBottom'; break; case 41:
outClass = 'pt-page-rotatePushBottom';
inClass = 'pt-page-moveFromTop'; break; case 42:
outClass = 'pt-page-rotatePushLeft';
inClass = 'pt-page-rotatePullRight pt-page-delay180'; break; case 43:
outClass = 'pt-page-rotatePushRight';
inClass = 'pt-page-rotatePullLeft pt-page-delay180'; break; case 44:
outClass = 'pt-page-rotatePushTop';
inClass = 'pt-page-rotatePullBottom pt-page-delay180'; break; case 45:
outClass = 'pt-page-rotatePushBottom';
inClass = 'pt-page-rotatePullTop pt-page-delay180'; break; case 46:
outClass = 'pt-page-rotateFoldLeft';
inClass = 'pt-page-moveFromRightFade'; break; case 47:
outClass = 'pt-page-rotateFoldRight';
inClass = 'pt-page-moveFromLeftFade'; break; case 48:
outClass = 'pt-page-rotateFoldTop';
inClass = 'pt-page-moveFromBottomFade'; break; case 49:
outClass = 'pt-page-rotateFoldBottom';
inClass = 'pt-page-moveFromTopFade'; break; case 50:
outClass = 'pt-page-moveToRightFade';
inClass = 'pt-page-rotateUnfoldLeft'; break; case 51:
outClass = 'pt-page-moveToLeftFade';
inClass = 'pt-page-rotateUnfoldRight'; break; case 52:
outClass = 'pt-page-moveToBottomFade';
inClass = 'pt-page-rotateUnfoldTop'; break; case 53:
outClass = 'pt-page-moveToTopFade';
inClass = 'pt-page-rotateUnfoldBottom'; break; case 54:
outClass = 'pt-page-rotateRoomLeftOut pt-page-ontop';
inClass = 'pt-page-rotateRoomLeftIn'; break; case 55:
outClass = 'pt-page-rotateRoomRightOut pt-page-ontop';
inClass = 'pt-page-rotateRoomRightIn'; break; case 56:
outClass = 'pt-page-rotateRoomTopOut pt-page-ontop';
inClass = 'pt-page-rotateRoomTopIn'; break; case 57:
outClass = 'pt-page-rotateRoomBottomOut pt-page-ontop';
inClass = 'pt-page-rotateRoomBottomIn'; break; case 58:
outClass = 'pt-page-rotateCubeLeftOut pt-page-ontop';
inClass = 'pt-page-rotateCubeLeftIn'; break; case 59:
outClass = 'pt-page-rotateCubeRightOut pt-page-ontop';
inClass = 'pt-page-rotateCubeRightIn'; break; case 60:
outClass = 'pt-page-rotateCubeTopOut pt-page-ontop';
inClass = 'pt-page-rotateCubeTopIn'; break; case 61:
outClass = 'pt-page-rotateCubeBottomOut pt-page-ontop';
inClass = 'pt-page-rotateCubeBottomIn'; break; case 62:
outClass = 'pt-page-rotateCarouselLeftOut pt-page-ontop';
inClass = 'pt-page-rotateCarouselLeftIn'; break; case 63:
outClass = 'pt-page-rotateCarouselRightOut pt-page-ontop';
inClass = 'pt-page-rotateCarouselRightIn'; break; case 64:
outClass = 'pt-page-rotateCarouselTopOut pt-page-ontop';
inClass = 'pt-page-rotateCarouselTopIn'; break; case 65:
outClass = 'pt-page-rotateCarouselBottomOut pt-page-ontop';
inClass = 'pt-page-rotateCarouselBottomIn'; break; case 66:
outClass = 'pt-page-rotateSidesOut';
inClass = 'pt-page-rotateSidesIn pt-page-delay200'; break; case 67:
outClass = 'pt-page-rotateSlideOut';
inClass = 'pt-page-rotateSlideIn'; break;
}
} </script></head><body>
<div id="viewsWrapper">
<div id="view1" class="pt-page">这个是页面1......</div>
<div id="view2" class="pt-page">这个是页面2......</div>
<div id="view3" class="pt-page">这个是页面3......</div>
<div id="view4" class="pt-page">这个是页面4......</div>
</div>
<br/>
<input type="button" onclick="changeView('#view1')" value="切换页面1"/>
<input type="button" onclick="changeView('#view2')" value="切换页面2"/>
<input type="button" onclick="changeView('#view3')" value="切换页面3"/>
<input type="button" onclick="changeView('#view4')" value="切换页面4"/>
<br/>
<br/>
<div id="radiosDiv"></div></body></html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439源码下载：场景切换.zip
原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_829.html