为什么页面内容不会随着 Swup 转换而改变？答案

【问题标题】：Why does page content not change with Swup Transition?为什么页面内容不会随着 Swup 转换而改变？
【发布时间】：2022-07-21 16:36:10
【问题描述】：

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

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

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

[正确的 URL 但错误的内容][1]

这是所有的 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 swup

【解决方案1】：

您需要在要转换的每个页面上都有 2 个脚本：

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

【讨论】：