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

Question

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

为了让你了解我在这里的真正意思，这里有一个很好的例子，http：//keepearthquakesweird.com 。

您会注意到，当您按下 Enter 按钮时，页面过渡到完全不同的页面（请注意 url 更改）。这就是我正在努力实现的目标。

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

最新尝试：

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

杰奎里

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

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

1. 捕获点击并通过 AJAX 加载新内容
2. 过渡/动画页面以显示新内容
3. 使用历史记录 API 更新地址栏

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

Ps：iframe不是要走的路，它们的目的非常不同