如何在纯JavaScript中实现jQuery Mobile Animation Ajax页面导航(过渡)

Question

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

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

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

非常需要帮助。

Answer 1

要更改 Url，您可以使用如下所示的内容：

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

有关详细信息，请参阅此链接：使用不带哈希的新 URL 更新地址栏或重新加载页面

如果你想使用 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/

Answer 2

我建议使用jQuery地址插件

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