HTML5 - 用CSS3动画制作场景切换效果（移动，旋转，淡入淡出等）
两个场景（即两个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>源码下载：场景切换.zip
原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_829.html
声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。
- 上一篇：没有了
- 下一篇： HTML5 - 使用autofocus让控件自动获取焦点
