页面转换，如何将页面滑入现有页面答案

【问题标题】：page transitions, how to slide a page in over the existing one页面转换，如何将页面滑入现有页面
【发布时间】：2017-05-11 12:44:34
【问题描述】：

我正在寻求实现页面转换，从而使指向另一个页面的链接不会加载页面，而是将下一页滑入下一页。类似于此演示站点上的MOVE 转换：http://tympanus.net/Development/PageTransitions/
虽然这并不完全正确，因为这只是一页（即 url 不会改变），但它们需要在不同页面之间进行转换。

我得到了这样的结果：
HTML：

<body>
    <div class="container">
        <a href="next-page.html" class="slide_page">Link</a>
        TEXT GOES HERE
    </div>
</body>

jQuery:

$(function(){
    // hide the div on page load and use a slidedown effect
    $('div.container').fadeOut(0, function(){
        $(this).slideDown(500);
    });
    // capture link clicks and slide up then go to the links href attribute
    $('a.slide_page').click(function(e){
        e.preventDefault();
        var $href = $(this).attr('href');
        $('div.container').slideUp(500, function(){
            window.location = $href;
        });
    });

});

但这并不完全正确，因为此方法会先向上滑动当前页面，然后再向下滑动下一页，但是这里的 url 更改是好的。任何建议将不胜感激！

【问题讨论】：

stackoverflow.com/questions/4403004/sliding-an-entire-web-page 重复？
这是预期的结果。您链接的示例不会加载新页面，它的内容位于不同的 div 上。当你加载一个新的 url 时，脚本首先制作旧页面的结束动画，然后加载新页面，然后制作开始动画。这种方式没有其他可能。
嘿，我最近使用了那个页面转换的东西。我也许可以帮助你。您介意解释您遇到的确切问题吗？因为我不确定我是否明白你的问题。
@Secret 嘿，理想情况下，我想要一个类似于MOVE 的页面转换：tympanus.net/Development/PageTransitions 我知道它们只是相互滑动的单独 div，我只是想知道从一个页面到另一个页面是否存在相似的过渡？
为了记录，每次我看到这样的问题时，我都将其解读为：“嗨，我想让我的网页加载速度比现在更慢，使用一个不熟悉的界面，只是因为我认为它看起来不一样，尽管每个人都已经在 PowerPoint 演示文稿中看到它并且也讨厌它。有人可以帮我再破坏一下网络吗？”

标签： javascript jquery html css

【解决方案1】：

如果我理解正确，您想要滑动一些东西，而不是仅仅滑动任意 div，您想要在一个全新的网页中滑动？

您可以做的是使用 AJAX。所以基本上，发出一个 ajax 请求，然后当您收到数据时，将您的 #next-page.html() 更改为您收到的数据。

你现在必须循环它们，所以设置一个“#active-page”可能会更好。

这是我使用它的网站。 http://cs75.heliohost.org/ 当您单击链接时，会显示幻灯片动画，但如果我编辑了幻灯片的 html，我可以将新页面放在该滑动矩形上。

这里是你需要的东西：

两个“页面”。您将随时重复使用这些内容。
当用户单击链接时，进行 ajax 调用，然后替换 'inactive-Page' 与您收到的数据。
激活“非活动页面”，然后应用您的动画。
把被替换的页面变成'inactive-Page'

请随意询问我的回答是否有任何含糊之处。

【讨论】：

这看起来不错，您引用的网站看起来与我所追求的非常接近（只是方向不同）。今晚我会试一试，让你知道我的进展如何！
您链接的网站现在似乎处于非活动状态？！不过，这绝对是我要实现的目标，当它重新上线时告诉我，我会再看一看。
@user1374796 是的，不幸的是我似乎被停职了，那个网站只是一个一次性的免费网站。不过请查看我的编辑。

【解决方案2】：

您可以将查询字符串设置为?animate=true并在next-page.html中向下动画

$(function() {
   if (location.search.match(/animate=true/)) {
      $('body').hide().slideDown();
   }
});

您还可以使用 html 隐藏正文，以便在 DOM 准备好之前将其隐藏。

链接是

<a href="next-page.html?animate=true" class="slide_page">Link</a>

【讨论】：

【解决方案3】：

关于动画：

如果你想让两者都向上滑动，你必须告诉两者都向上滑动。所以不要使用“slideDown”，而是使用“slideUp”。

如果您查看页面的源代码，您会发现它们实际上是在使用 CSS 动画来完成大部分工作。这使得它们可以轻松地同时运行两个动画，并允许浏览器使用硬件加速来处理动画（jQuery 和一般的 JS，默认情况下倾向于将它们排队，但您可以添加 queue:false to make them run at the same time，而 JavaScript 没有还可以访问硬件加速）。

这些动画的基石在animations.css file。注意底部命名的关键帧以及它们的工作原理：

@-webkit-keyframes moveToTop {
    to { -webkit-transform: translateY(-100%); }
}
@-moz-keyframes moveToTop {
    to { -moz-transform: translateY(-100%); }
}
@keyframes moveToTop {
    to { transform: translateY(-100%); }
}

您不需要像那样使它们成为关键帧，您可以将它们构建到元素（或类）本身中。我认为他们使用命名关键帧是因为他们一遍又一遍地使用许多相同的动画。但是，这些变换是使它们向上移动（或您想要的任何其他方向）的原因。

关于网址更改：

与其尝试自己编写功能，不如查看Pjax。它是使 GitHub 执行您正在寻找的页面幻灯片的库。如果不出意外，您可以查看源代码，看看他们是如何做到的。

它的工作原理是将 AJAX 与 PushState 结合起来（因此得名）。当您单击链接时，JavaScript 会覆盖默认单击行为并进行 AJAX 调用以获取新内容。然后它激活 PushState 调用，更新浏览器的 URL（这是“不同页面”事物的关键），并在新内容中生成动画。在不支持 PushState 的浏览器中，页面就像任何其他网站一样加载。

【讨论】：

感谢您，非常感谢！看起来不错，我会试一试，让你知道它是怎么回事:)