Я использую swup. js для перехода на страницу. Я проверил, и это работает. Теперь у меня есть три страницы дома, цены и около. У каждой страницы свой класс в теле. Я добавил класс к телу, и этот класс не работает. Переход страницы работает только с <main id="swup" class="transition-fade">, и я думаю, что контент должен быть внутри основного. У меня CSS как .about page nav{background-color:#f00;}, но он не работает.
Проверьте ниже пример
const swup = new Swup()
body {
overflow-x: hidden;
}
.transition-fade {
transition: 0.4s;
opacity: 1;
}
html.is-animating .transition-fade {
opacity: 1;
/* transform: translateX(100%);*/
}
html.is-leaving .transition-fade {
opacity: 0;
/*transform: translateX(0);*/
}
<script src="https://unpkg.com/swup@latest/dist/swup.min.js"></script>
<body class="aboutpage">
<nav>
<ul>
<li><a href="http://localhost:8080/learn/pt/index.html">Home</a></li>
<li><a href="http://localhost:8080/learn/pt/pricing.html">Pricing</a></li>
<li><a href="http://localhost:8080/learn/pt/about.html">About</a></li>
</ul>
</nav>
<main id="swup" class="transition-fade">
<h1>This is the about page</h1>
</main>
</body>