Estoy probando un proyecto simple en el que las páginas tienen una transición usando Swup ( https://swup.js.org/getting-started/example ), pero no puedo hacerlo funcionar.
<a href="/subpage.html">Other Page</a>[URL correcta pero contenido incorrecto][1]
Esto es todo el HTML, CSS y 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>Y este es el HTML en subpage.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> Por favor ayúdame, ¿qué estoy haciendo mal?
[1]: https://i.stack.imgur.com/dbq3E.png
