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

最新推荐文章于 2023-10-11 13:34:16 发布

ayetony 清风

最新推荐文章于 2023-10-11 13:34:16 发布

阅读量404

点赞数

文章标签： html css动画自动旋转

代码如下：

HTML5-页面切换动画

#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;

}

//当前页面移动完毕

var endCurrPage = false;

//后续页面移动完毕

var endNextPage = false;

//入场动画和出场动画

varoutClass = '';

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 += '效果'+i;

if(i%7==0){

str += "
";

}

$("#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: