文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么页面内容不会随着Swup的转换而改变？

问为什么页面内容不会随着Swup的转换而改变？
EN

Stack Overflow用户

提问于 2022-05-16 11:48:39

回答 1查看 282关注 0票数 0

我正在尝试一个简单的项目，在这个项目中，页面使用Swup (https://swup.js.org/getting-started/example)进行转换，但我无法让它正常工作。

如果我点击链接的网址正在改变，但内容保持不变，从subpage.html我可以更改为index.html，但在所有情况下都没有转换。

<a href="/subpage.html">Other Page</a>

正确的URL而错误的内容

这些都是HTML、CSS和JS：

<body>

  <style>
    .transition-fade{
      transition: 0.5s;
      opacity: 1;
    }

    .html.is-animating .transition-fade{
      opacity: 0;
    }
  </style>
  
  <div class="container">

    <main id="swup" class="transition-fade">
      <h1>homepage</h1>
      <p>Lorem ipsum dolor sit amet.</p>
      <a href="/subpage.html">Other Page</a>
    </main>
  </div>

  <script src="/node_modules/swup/dist/swup.min.js"></script>
  <script>
    const swup = new Swup();
  </script>

</body>

这是subpage.html上的HTML：

<body>

  <style>
    .transition-fade{
      transition: 0.5s;
      opacity: 1;
    }

    .html.is-animating .transition-fade{
      opacity: 0;
    }
  </style>
  
  <div class="container">
    <main id="swup" class="transition-fade">
      <h1>Supage</h1>
      <p>Lorem ipsum dolor sit amet.</p>
      <a href="/index.html">Homepage</a>
    </main>
  </div>

</body>

请帮帮我，我做错什么了？

1：https://i.stack.imgur.com/dbq3E.png

swup

javascript

html

css

回答 1

Stack Overflow用户

发布于 2022-07-21 08:36:10

您需要在您想要转换的每一页上都有两个脚本：

  <script src="/node_modules/swup/dist/swup.min.js"></script>
  <script>
    const swup = new Swup();
  </script>

票数 0

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

原文链接：

https://stackoverflow.com/questions/72258733

复制

相似问题

问为什么页面内容不会随着Swup的转换而改变？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么页面内容不会随着Swup的转换而改变？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么页面内容不会随着Swup的转换而改变？
EN