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

Question

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

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

您会注意到，当您按 Enter 按钮时，页面会转换到完全不同的页面(注意网址更改)。这就是我想要实现的目标。

到目前为止，我已经尝试了很多不同的插件，例如 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

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

希望这会对您有所帮助。