Swup动画

问题描述

我正在使用swup进行页面转换，但是我的特定网站没有任何反应。我可以在一个简单的两页HTML示例网站上运行它，但是对我的投资组合执行完全相同的操作是行不通的。几天来我一直在试图解决这个问题，我感到绝望。

我尝试过的东西

使用unpkg中的脚本链接。
创建完整的启动文档以将Node安装在我的网站上。
将单个const变量放入单独的文档和HTML文件本身中。
仅在我希望网站指向的部分上放置“ main id =“ swup” class =“ transition-fade”标签。
检查以确保我的CSS类没有错别字。
更改文件源以./或/或无。

我需要什么

我想从我网站的投资组合部分进行页面转换，以淡入到下一页。

相关代码

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

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

<!DOCTYPE html>
<html lang="en">

<head>
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&family=Russo+One&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/CSS/style.css">
  <link id="theme-style" rel="stylesheet" href="">

  <script defer src="/app.js"></script>
  <script defer src="https://use.fontawesome.com/releases/v5.13.1/js/all.js"></script>
  <script defer src="/index.js" type="text/javascript"></script>
  <script defer src="/node_modules/swup/dist/swup.min.js"></script>
  <script defer>
    const swup = new Swup();
  </script>
  <title>Kim Lachance</title>
  </section>

  <main id="swup" class="transition-fade">
    <section id="post-section" class="s1">
      <div class="main-container">
        <h3 style="text-align: center;">Some of my projects</h3>
        <div class="post-wrapper">

          <div>
            <div class="post">
              <img class="thumbnail" src="./images/tindog.sr.png" alt="">
              <div class="post-preview">
                <h6 class="post-title">Tindog</h6>
                <p class="post-intro">Fictional dog dating app website made with a Bootstrap framework</p>
                <a href="/tindog.html">Visit</a>
              </div>
            </div>
          </div>
          <div>
            <div class="post">
              <img class="thumbnail" src="./images/omnifood.sr.png" alt="">
              <div class="post-preview">
                <h6 class="post-title">Omnifood</h6>
                <p class="post-intro">Fictional food delivery app website made with HTML,CSS and jQuery</p>
                <a href="#">Visit</a>
              </div>
            </div>
          </div>
          <div>
            <div class="post">
              <img class="thumbnail" src="./images/klmedia.sr.png" alt="">
              <div class="post-preview">
                <h6 class="post-title">KL Media</h6>
                <p class="post-intro">Website for my own freelancer marketing company</p>
                <a href="#">Visit</a>
              </div>
            </div>
          </div>
          <div>
            <div class="post">
              <img class="thumbnail" src="./images/drumkit.sr.png" alt="">
              <div class="post-preview">
                <h6 class="post-title">Drumkit Javascript</h6>
                <p class="post-intro">An exercise I built to flex my javascript muscles</p>
                <a href="#">Visit</a>
              </div>
            </div>
          </div>
          <div>
            <div class="post">
              <img class="thumbnail" src="./images/dicee.sr.png" alt="">
              <div class="post-preview">
                <h6 class="post-title">Dicee Game Javascript</h6>
                <p class="post-intro">An exercise I built to flex more javascript muscles</p>
                <a href="#">Visit</a>
              </div>
            </div>
          </div>

        </div>
      </div>
    </section>
  </main>

我的下一页上还包含所有这些标签和脚本。

谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html javascript swup