La transition CSS à laquelle les développeurs n'osaient même pas rêver pendant de nombreuses années est maintenant possible 🥳
Introduction aux View Transitions CSS pour animer nativement la transition entre deux états d'une application web.
Une façon ingénieuse de créer des transitions visuelles entre l'affichage de deux bouts de code qui partagent certaines similitudes. Par exemple pour illustrer une simplification de code.
Un tuto simple qui aborde l'animation d'un SVG simple avec des transitions CSS.
Une autre lib Vue pour effectuer une transition animée d'un composant entre deux pages.
Une lib Vue qui permet de créer des transitions pour un composant entre son affichage dans une page A et son affichage dans une page B. Un peu à la manière de ce que préconise Material Design, pour conserver un maximum de contexte lors d'une navigation.
Tout est dans le titre :)
Cet article est très didactique, parfait pour bien comprendre les transitions CSS. Il n'aborde cependant pas les animations CSS à proprement parler.
Une lib JS pour donner des airs de SPA à votre site web.
Bon par contre il faut bien comprendre comment ça altère la navigation pour éviter les soucis (le <head> n'est chargé qu'au début).
Un exemple intéressant pour donner l'impression qu'un site classique est une single-page application. Il s'agit de fluidifier les transitions entre les pages.
Pas certain que ça ait un énorme intérêt et certains morceaux de code font un peu bricolage mais l'idée est intéressante.
Une lib Javascript qui permet d'effectuer des transitions entre les différentes pages de votre site.
Par contre attention, pour fonctionner, la lib charge le contenu de la page à afficher via AJAX dans un élement caché du DOM puis lance la transition lorsque le chargement est terminé et supprime le contenu de la page d'origine une fois la transition terminée.
Du coup ça peut foutre le boxon si vous utilisez des id (qui ne seront plus nécessairement unique sur la page, le temps de la transition) ou si vous chargez des ressources différentes selon la page (je pense que seul le
J'ai déjà utilisé jQuery Mobile qui fonctionne de manière un peu similaire et ça peut vite devenir prise de tête.
Comment effectuer des transitions sur les ombres proprement et avec de bonnes perfs.
Autre lien : https://lehollandaisvolant.net/?id=20170314183516