如何用纯 JavaScript 实现 jQuery Mobile 动画 Ajax 页面导航（转换）

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

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

我们可以仅使用 javascript 为单页应用程序实现相同的功能吗？

非常需要帮助。

要更改 Url，您可以使用类似以下内容：

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

请参阅此链接了解更多信息：使用新 URL 更新地址栏，无需哈希或重新加载页面 https://stackoverflow.com/questions/3338642/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。

Note: + ' #someDiv'是可选的。它允许您只加载正在加载的 Url 中的某个 div（这样您就可以避免再次将所有主体加载到 DOM 中）。

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