文章/答案/技术大牛

发布

社区首页 >问答首页 >将Swup JavaScript与Wordpress主题集成

问将Swup JavaScript与Wordpress主题集成
EN

Stack Overflow用户

提问于 2020-03-03 05:06:27

回答 1查看 1.1K关注 0票数 0

我遇到了一个问题，我试图在Wordpress站点中使用Swup进行页面转换。我可以让内容淡出，但它不会淡入。相反，它会逐渐淡出，然后下一页的内容就会突然出现。

在我的标题中，我有：

<script src="https://unpkg.com/swup@latest/dist/swup.min.js"></script>
<script>
        const options = {
          linkSelector:
            'a[href^="' +
            window.location.origin +
            '"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup])'
        };
        const swup = new Swup();
</script>

在我的文档正文中，我包含了类“transition-fade”。然后在我的样式表中，我有：

.transition-fade{
   opacity: 1;
   transition: 600ms;
}

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

在控制台中，我收到一个错误消息：“未捕获索引:无法在e (swup.min.js:1)的新e (swup.min.js:1)处设置null的'responseURL‘属性:20”

对这里可能发生的事情有什么见解吗？

提前谢谢。

javascript

wordpress

回答 1

Stack Overflow用户

发布于 2020-06-04 05:53:43

问题是没有定义在哪里会发生转换的选择器。

第一件事是你应该在body标签里面有标签，在这里你需要转换才能工作。

<body>
<div id="swup">
{All content}
</div>
</body>

然后，在选项中，您需要像这样定义特定的标记

 const options = {
 containers: ["#swup"],
 linkSelector: ..

就是这样！

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60496642

复制

相似问题

问将Swup JavaScript与Wordpress主题集成
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将Swup JavaScript与Wordpress主题集成EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将Swup JavaScript与Wordpress主题集成
EN