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

【问题标题】：Creating a slide up transition between two seperate pages在两个单独的页面之间创建上滑过渡
【发布时间】：2016-02-08 20:08:50
【问题描述】：

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

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

您会注意到，当您按下回车按钮时，页面会跳转到完全不同的页面（请注意 url 更改）。这就是我想要达到的目标。

到目前为止，我已经尝试了很多不同的插件，例如动画，（不记得其他插件：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%' });
    });
});

【问题讨论】：

您需要通过 Ajax 加载页面才能达到此效果。您可以手动更新 URL，而无需更改页面。
浏览器中的 url 可能会改变，但从技术上讲，它仍然是您看到的同一页面。永远不会重新加载，只是 DOM 重新渲染。
@GoneCodingGoodbye 是否有关于如何实现这一目标的教程？我也不知道什么是或如何使用 ajax。
有像Ajaxify 这样的插件可以透明地为您处理加载，但不确定它支持哪些过渡。我们从头开始编写了一个完整的系统来支持这种类型的转换（以及更多），但是它太复杂而无法提供（我写了它，而且大多数时候我自己都不明白它是如何工作的）:)

标签： javascript jquery html css css-transitions

【解决方案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

但并非所有浏览器都支持过渡，因此通常被认为是糟糕的设计。

希望这会对您有所帮助。

【讨论】：

不错的主意。 IE 是主要问题，因为只有 IE11 支持。

【解决方案2】：

您链接到的页面使用History API，它允许在不重新加载整个页面的情况下更改 URL 地址。正如其他人所说，你会：

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

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

Ps：iframes 不是要走的路，它们有一个非常不同的目的

【讨论】：

是的，iframe 只是最后一次绝望的尝试，试图得到我想要的东西。