0

每次我在单页应用程序的 div 容器中加载内容时，我都试图实现平滑过渡。我没有使用 Reactjs，只是一个 onclick 函数通过 Get 请求加载我的 div #main-content 中的内容。

作为参考，这是 onclick 函数在索引文件中的样子： <a class="" id="home-top-nav" href="#" onclick="$pf.homeHtml()">

这就是 js 中内容请求的样子（调用 IIFE：global.$pf = pf）：

pf.homeHtml = function () {
   $ajaxUtils.sendGetRequest(homeHtml, function (responseText) 
     {document.querySelector("#main-content").innerHTML = responseText;
     }, false);
};

在这种情况下，responseText它是通过 ajax 请求插入到主内容中的已解析的 html 片段。每当我单击并请求另一个页面（关于、联系人等）时，都会加载许多其他片段。

我尝试使用 Swup 没有成功。

我可以做些什么来简单地为内容卸载添加淡出效果，并为#main-content 内的新内容加载添加淡入效果，而不是在它们之间进行硬过渡？

4

0 回答 0