swup - Swup JS 卡在“pageLoaded”状态

Question

您好，我正在尝试使用这个很棒的插件“Swup JS”。当我从他们的网站运行代码时，插件运行完美。

当我尝试将它添加到我的网站时，它停留在“pageLoaded”状态。

我试图删除所有代码并分别粘贴每个部分，但错误不断发生。基本上 URL 正在改变并且动画正在工作（直到淡出部分），但新内容永远不会加载。调试器插件显示它直到这部分“pageLoaded”没有任何错误。

有没有人使用过这个插件或发现这个错误？

Answer 1

我遇到了同样的问题，并意识到这是由于“transition-fade”类动画没有正确应用于 HTML。这在以下文档常见问题中进行了介绍：缺少过渡类部分的样式。

要解决您的问题，请确保您的 swup 元素具有与其链接的动画类，并且您已在样式表中正确引用了动画。

.transition-fade {
  transition: 0.4s;
  opacity: 1;
}

html.is-animating .transition-fade {
  opacity: 0;
}