使用CSS和jQuery进行页面转换

<div id="main-page">
 <div>
     <h1>Page Transition</h1>
       <a href="#"> Click Here</a>
</div>

</div>


<div id="next-page">
 <div>
     <h1>This is the 2nd page</h1>
       <a href="#"> Click Here</a>
</div>

</div>

#main-page {
  height: 50vh;
  width: 100%;
  position: fixed;
  left: 0;
  BACkground-color: #e74c3c;
 padding: 40px 0 40px 0;
}

h1{
   font-family: Helvetica;
   color: #fff;
    font-weight: normal;
    text-align: center;

}

#next-page{
      height: 50vh;
  width: 100%;
  position: fixed;
  left: 0;
  BACkground-color: #27ae60;
 padding: 40px 0 40px 0;
    display: none;
}



a{
 font-family: Helvetica;
  color: #fff;
    border: 2px solid #fff;
    padding: 10px 15px;
    display: block;
    text-align: center;
    margin: 0 auto;
    width: 20%;
    text-decoration: none;
}

所以找到了你的解决方案,请在这里查看： http://transitiontest.comeze.com/

test1 =半页,test2 =整页,test3 =单页

在此示例中,有两个主要对象：#main-page和#sext -page,两者共享相同的默认属性,但背景颜色除外：

height: 25px;
width: 375px;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
BACkground-color: #27ae60;
display: none;

我用position：absolute;以及使对象居中的边距.要隐藏它我将display设置为none;.

在页面加载时,我首先重置主对象的所有属性并将其淡入,如下所示.

当单击.linkmain或.linknext时,它们都执行相同的功能,但是对于不同的对象(主要或下一个).

该函数首先淡出主对象中的文本并使该对象缩小.完成这两个操作后,对象将使用函数旋转以转换旋转.

完成所有这些操作后,该功能淡出对象单击,以显示新对象.

下一步,显示新对象：

同样,首先我重置对象的所有属性并使其淡入.

接下来,我更改与新对象之一匹配的对象的背景颜色.

完成后,我为高度设置动画,然后设置宽度,最后淡化新对象的内容.

JS

// This function is used to transition rotation
$.fn.animateRotate = function(angle,duration,easing,completE) {
  var args = $.speed(duration,completE);
  var step = args.step;
  return this.each(function(i,E) {
    args.complete = $.proxy(args.complete,E);
    args.step = function(now) {
      $.style(e,'transform','rotate(' + now + 'deg)');
      if (step) return step.apply(e,arguments);
    };

    $({deg: 0}).animate({deg: anglE},args);
  });
};

// Set all properties of main object to default and fade it in
$("#main-page").css("BACkground-color","#e74c3c");
$("#main-page").css("height","100vh");
$("#main-page").css("width","100%");
$("#main-page").fadeIn();
$(".maincontent").fadeIn();

// This gets activated once clicked on object .linkmain
$(".linkmain").on("click",function() {
    $(".maincontent").fadeOut();
    $("#main-page").animate({
        width: "25px",height: "375px"
    },function() {
        $(this).animateRotate(90);
    });

    // Hide the main object after all the animations above are finished
    setTimeout(function() {
        $("#main-page").fadeOut();       
    },1500);

    // Fade in the new page after all the animations above are finished
    setTimeout(function() {
        $("#next-page").animateRotate(0,0);
        $("#next-page").css("height","25px");
        $("#next-page").css("width","375px");
        $("#next-page").fadeIn();
        $("#next-page").animate({
            BACkgroundColor: "#27ae60"
        },function() {
            $(this).animate({
                height: "100vh"
            },function() {
                $(this).animate({
                    width: $("body").width()
                },function() {
                    $(".nextcontent").fadeIn(300);
                });
            });
        });
    },800);
});

// This gets activated once clicked on object .linknext 
$(".linknext").on("click",function() {
    $(".nextcontent").fadeOut();
    $("#next-page").animate({
        width: "25px",function() {
        $(this).animateRotate(-90);
    });

    // Hide the next object after all the animations above are finished
    setTimeout(function() {
        $("#next-page").fadeOut();          
    },1500);

    // Fade in the main page after all the animations above are finished
    setTimeout(function() {
    $("#main-page").animateRotate(0,0);
    $("#main-page").css("height","25px");
    $("#main-page").css("width","375px");
        $("#main-page").fadeIn();
        $("#main-page").animate({
            height: "100vh"
        },function() {
            $(this).animate({
                width: $("body").width()
            },function() {
                $(".maincontent").fadeIn(300);
            });
        });
    },1400);
});