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

Question

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

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

您会注意到，当您按下回车按钮时，页面会转换到完全不同的页面（请注意 url 的变化）。这就是我想要实现的目标。

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

最近一次尝试：

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
transition/animate 显示新内容的页面
使用历史记录更新地址栏API

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

Ps：iframe 不是正确的选择，它们的用途截然不同

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

Creating a slide up transition between two seperate pages

html

javascript

css

jquery

css-transitions