Je vous propose de découvrir la librairie Swup. Cette librairie va vous permettre de mettre en place simplement et rapidement un effet de transition entre les différentes pages de votre site.
Pour arriver à créer cet effet de transition la librairie va fonctionner comme la librairie Turbolinks en introduisant en plus des fonctionnalités liées à la gestion des animations.
Le principe
La librairie va automatiquement greffer un comportement sur l'ensemble des liens internes de votre application. Lorsque l'utilisateur va cliquer sur un lien, le comportement natif sera détourné au profit d'un chargmeent AJAX de la page suivante. Une fois le chargement effectué le contenu sera injecté dans la page courante.
Pour créer l'effet de transition différentes classes sont ajoutées à votre balise <html> pendant les différentes étapes de chargement.
Utilisation
La librairie est très simple d'utilisation.
On commence par entourer le contenu que l'on souhaite voir remplacer entre chaque page d'un élément avec l'id swup et on initialise le JavaScript.
import Swup from 'swup'
const swup = new Swup()Ensuite, afin de voir les éléments disparaître et apparaître entre les pages, il va falloir définir des transitions CSS. Par défaut, la classe doit commencer par transition- pour que Swup puisse observer la fin de l'animation (il est possible de changer ce comportement si nécessaire).
.transition-fade {
transition: 0.4s;
opacity: 1;
}
html.is-animating .transition-fade {
opacity: 0;
}On ajoutera cette classe à nos éléments
<div class="transition-fade" id="swup">
<!-- Du contenu HTML ici -->
</div>Et voila ! A partir de maintenant les pages se chargent avec un effet de transition.
