我真的需要你的帮助.我正在创建一个像这样的页面转换：
http://goo.gl/74K2rQ
http://goo.gl/74K2rQ
但我正在关注这个动画到我的OWN设计：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>
#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/
当我点击这个单词时点击这里是一个链接,它必须将页面包装到下一页并完全遵循这个设计：http://goo.gl/NVjcZ2
我试图转换动画的第一阶段,但我不知道如何进入下一阶段.我知道我需要在这个上使用jQuery,但我该怎么办？谁能帮忙.
这是我自己的JSFIDDLE：https://jsfiddle.net/8y801eqh/11/
解决方法
所以找到了你的解决方案,请在这里查看：
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);
});
