jquery - 使用 CSS 和 jQuery 进行页面转换

Question

我真的需要你的帮助。我正在创建这样的页面转换: http://goo.gl/74K2rQ

但我正在关注我自己设计的动画:http://goo.gl/NVjcZ2

到目前为止，这是我的实验:https://jsfiddle.net/f7xpe0fo/1/

它还没有遵循我的设计。要查看我的实际 JSFIDDLE，请在此处查看: https://jsfiddle.net/8y801eqh/11/

我的 HTML 包含的内容是我用 ID 的主页和下一页创建了两个 div。第一页为红色，下一页为绿色。默认情况下，我隐藏下一页 div。查看我的 HTML:

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

现在对于我的 CSS，我修复了它们的设计以匹配整个页面:

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

根据我在这里的实验:https://jsfiddle.net/f7xpe0fo/1/

当我点击单词 click here 这是一个链接时，它必须将页面换行到下一页并完全遵循此设计:http://goo.gl/NVjcZ2

我试图过渡动画的第一阶段，但我不知道如何进行到下一阶段。我知道我需要在这个上使用 jQuery，但我该怎么做呢？谁能帮忙。

这是我自己的 JSFIDDLE:https://jsfiddle.net/8y801eqh/11/

Answer 1

找到您的解决方案，请在此处查看:http://transitiontest.comeze.com/

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

在这个例子中，有两个主要对象:#main-page 和#next-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 被点击时，它们都执行相同的功能，但针对不同的对象(main 或 next)。

该函数首先淡出主对象中的文本并使该对象缩小。这两个都完成后，对象旋转使用一个函数来过渡旋转。

所有这些完成后，该函数会淡出单击的对象，以显示新对象。

下一步，显示新对象:

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

接下来，我更改与新对象相匹配的对象的背景颜色。

完成后，我为高度设置动画，然后为宽度设置动画，最后淡入新对象的内容。

JS

// This function is used to transition rotation
$.fn.animateRotate = function(angle, duration, easing, complete) {
  var args = $.speed(duration, easing, 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",
        height: "375px"
    }, 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);
});