Блог

Главная - Вопросы по программированию - Анимации переключения

Анимации переключения

#javascript #html #css #swup

#javascript #HTML #css #переключение

Вопрос:

Я использую swup для переходов страниц, но на моем конкретном веб-сайте никогда ничего не происходит. Я заставил это работать на простом двухстраничном HTML-примере веб-сайта, но делать то же самое для моего портфолио не получается. Я пытался разобраться в этом уже несколько дней и прихожу в отчаяние.

Что я пробовал

  1. Используя ссылку на скрипт из unpkg.
  2. Создаю полный стартовый документ для установки Node на самом моем веб-сайте.
  3. Помещаем единственную переменную const в отдельный документ и в сам HTML-файл.
  4. Размещаю тег ‘main id =»swup» class =»transition-fade’ только на той части моего веб-сайта, на которую я хочу, чтобы он указывал.
  5. Проверено, чтобы убедиться, что в моих классах CSS нет опечаток.
  6. Изменение исходного файла для начала ./или / или нет.

Что мне нужно

Я хочу сделать переход страницы из части портфолио моего веб-сайта, чтобы перейти к следующей странице.

Соответствующий код 

 .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@500amp;family=Russo Oneamp;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>

На моей следующей странице также есть все эти теги и скрипты на них.

Спасибо!

Комментарии:

1. РЕДАКТИРОВАТЬ ** Этот код запускается перед всеми разделами ‘<main id=»swup» class=»transition-fade»> <идентификатор раздела=»post-section»class=»s1″> <div class=»main-container»> <h3 style=»text-align: center;»> Некоторые из моих проектов</ h3> <div class=»post-wrapper»>’

2. Я думаю, что внешний редактор лучше отображает код. Пожалуйста, попробуйте: codesandbox.io/s и разместите ссылку здесь.

3. codesandbox.io/s/portfolio-website-7do5f?file=/tindog.html Ссылка, по которой вы хотите перейти, является первым элементом моего портфолио, «Tindog». Большое вам спасибо