如何进行页面转换答案

【问题标题】：How to make page transition如何进行页面转换
【发布时间】：2013-04-28 12:02:11
【问题描述】：

我正在制作一个网站，我想制作它，以便如果您单击页面底部的按钮，您将转到一个具有不同布局的新 .html 文件，但我希望它看起来像新的页面向上滑动，看起来很酷。

这是一个例子：

<!DOCTYPE html>
<html>
<body>

    <p>Create a link of an image:
        <a href="default.asp">
            <img src="smiley.gif" alt="HTML tutorial" width="32" height="32">
        </a>
    </p>

    <p>No border around the image, but still a link:
        <a href="default.asp">
            <img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32">
        </a>
    </p>
</body>
</html>

我需要这样当你点击图片时它会进入一个新页面，但是当它进入那个新页面时会有一个“向上滑动”的过渡。

谢谢！

【问题讨论】：

@Shomz 用于页面上的转换，而不是页面之间的转换。
@Adrian 我知道，这就是我给出定义的原因......它也解释了上面的 jquery 评论。

标签： html css-transitions transition

【解决方案1】：

您可以使用 iFrame 来完成此操作：

JS Fiddle Demo

我使用jQuery Transit 来制作过渡效果：

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

【讨论】：

【解决方案2】：

我不确定标准导航是否可行。一些应该可行的选项：

使用 JavaScript 进行导航（通过将所有内容放在同一页面上或通过 AJAX）
将所有内容放在同一页面上并使用 :target 和 CSS 过渡

对于选项 1，如果您使用历史 API，您仍然可以在浏览器中拥有合理的 URL。

【讨论】：

【解决方案3】：

我已经成功使用了这样的东西：http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

唯一的问题是您可能会看到新页面的短暂闪烁，然后它会消失，然后转入。如果不使用iframes 或类似的东西（我是一般不愿意这样做）。

【讨论】：

【解决方案4】：

您也可以尝试实现类似 vertical slider 的东西，很像 coda slider 但这个是为垂直滚动而开发的。 Demo.

我尝试将此类转换设为整页，但发现很难。（但我是JQ N00B）

Magic slider 提供水平和垂直滚动，可能更容易实现。

还可以查看this (tutorial here)，这可能是您需要的简单解决方案。

其实我认为最后一个是你想要的东西的壁橱

【讨论】：

这不会打开新的 .html 文件。这个线程的概念是去一个新的.html文件。