如何在纯 javascript 中实现 jQuery Mobile Animated Ajax 页面导航（转换）答案

【问题标题】：How to implement jQuery Mobile Animated Ajax page navigation (transitions) in plain javascript如何在纯 javascript 中实现 jQuery Mobile Animated Ajax 页面导航（转换）
【发布时间】：2014-02-11 13:42:32
【问题描述】：

我一直在使用基于 CSS3 的动画在单页应用程序中使用 javascript 为页面设置动画。最近我使用 jQuery mobile。默认情况下，对于所有链接，jQuery Mobile 会使用 ajax 加载页面并对其进行动画处理。

我可以做的一种方法是附加 url 哈希（这就是 gmail 的工作方式）。但我不想使用哈希，我想像 jQuery Mobile 那样更改完整的 url。

我们能否仅使用 javascript 为单页应用程序实现相同的功能。

非常需要帮助。

【问题讨论】：

我相信这是使用history.pushState()完成的
您需要像 jQM 一样通过 Ajax 将外部页面加载到 DOM 中，以便动画/替代视图。
@Omar 谢谢，如果你能提供解决方案将不胜感激，因为我也在努力解决同样的问题
@Venky 类似于编写一个全新的框架。这与加载和动画无关，它涉及更新历史记录和创建自定义事件以处理页面/视图之间的转换。
@Omar 感谢您的帮助。我会尝试一点一点的去实现。

标签： javascript jquery ajax jquery-mobile

【解决方案1】：

要更改 URL，您可以使用以下内容：

window.history.pushState("object or string", "Title", "/new-url");

查看此链接了解更多信息：Updating address bar with new URL without hash or reloading the page

如果您想使用 AJAX 将一些内容加载到 DOM 中（这允许您进行视图淡化等），您可以执行以下操作：

$('.ajax_content').load( 
    //The Url + Only fetch this div from the page.
    $(this).attr('href') + ' #someDiv', 
    function() {
        //Do something when it's complete.
    }
);

.ajax_content 将是您要加载内容的 div。

注意：+ ' #someDiv' 是可选的。它允许您仅在正在加载的 Url 中加载某个 div（这样您就可以避免再次将所有正文加载到您的 DOM 中。

更多关于.load()的信息可以在这里找到：https://api.jquery.com/load/

【讨论】：

【解决方案2】：

我建议使用jQuery Address插件

它可以通过 ajax 加载页面，并且可以根据需要自定义 URL。

【讨论】：