Question

所以我一直在尝试创建一个在您实际进入网站之前有欢迎页面的网站，当您按下回车按钮时，第一页向上滑动，然后新页面从下面出现。

为了让您了解我的真正含义，这是一个很好的例子，http://keepearthquakesweird.com。

您会注意到，当您按下回车按钮时，会有一个页面转换到完全不同的页面（记下网址更改）。这就是我想要实现的目标。

到目前为止，我已经尝试了很多不同的插件，例如animsition，（不记得其他人：P）但似乎没有任何工作，所以我的最新尝试是iframes（注意网址不会改变）。

最新尝试：

HTML

<a id="myLink" href="#">
            Click to slide in new page
    </a>


<iframe id="newPage" src="https://jsfiddle.net/"></iframe>

CSS

#myLink {
position: absolute;
}

iframe {
width: 100%;
height: 100%;
top: 100%;    
position: fixed;
background-color: blue;
}

JQuery的

$(document).ready(function() {
    $('#myLink').click(function() {
    $('#newPage').transition({top: '0%' });
    });
});

Answer 1

我可以为您的问题陈述提供一个解决方案..

在头部内使用<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=12)">。

对于过渡，下面列出了20多种类型..

0       Rectangle towards centre
1       Rectangle from centre outwards
2       Circle towards centre
3       Circle from centre outwards
4       Horizontal wipe from bottom to top
5       Horizontal wipe from top to bottom
6       Vertical wipe from left to right
7       Vertical wipe from right to left
8       Vertical Blinds from left to right
9       Horizontal blinds ftom top to bottom
10      Box Blinds from left to right
11      Box Blinds from top to bottom
12      Pixel Fade
13      Vertical Window Opening from middle to sides
14      Vertical Window Closing from sides to middle
15      Horizontal Window Opening from middle to top/bottom
16      Horizontal Window Closing from top/bottom to middle
17      Diagonal: bottom right to top left
18      Diagonal: top right to bottom left
19      Diagonal: bottom left to top right
20      Diagonal: top left to bottom right
21      Vertical Line Fade
22      Horizontal Line Fade
23      Random

但所有浏览器都不支持转换，因此通常被认为是糟糕的设计。

希望这会帮助你。

Answer 2

您链接到的页面使用History API，这允许更改URL地址而无需重新加载整页。正如其他人所说，你会：

捕获点击并通过AJAX加载新内容
转换/动画页面以显示新内容
使用History API

我建议使用smoothState.js（jQuery插件），它会为您完成上述所有操作。

Ps：iframe不是要走的路，它们有着截然不同的目的

在两个单独的页面之间创建一个上滑过渡

2 个答案: