Temps de lecture estimé : 1 minute

Les transitions morphing sont très utilisées pour les interfaces graphiques.

Grâce à cette petite bibliothèque vous pourrez facilement animer vos éléments UI dans votre App React

  • Simple d’utilisation
  • Pas de positions définies en dur
  • animations utilisent le GPU (=> ça va vite et c’est fluide !)
  • Pas de layout ou rendu Paint du navigateur

Petits conseils :

  • Vous devez supprimer les espaces, afin de correspondre à la taille réel de l’élément. Une solution est d’appliquer display:inline-block ou d’englober le contenu dans un autre élément.
  • Les margins peuvent être problématiques, car cela crée de l’espace supplémentaire, là aussi vous pouvez englober l’élément dans un autre, ou encore animer les margins pour être sur qu’elles s’affichent bien pour les 2 états
  • Il est parfois nécessaire pour éviter que l’élément enfant soit déformé de l’englober dans un élément
  • Il peut y avoir des erreurs de calculs concernant les éléments li d’une liste. Pour y remédier il faut utiliser list-style:none;
  • Parfois il faudra rajouter des éléments parents englobants, plutot que des éléments enfants englobés
  • Évitez d’animer les éléments parents et enfants sinon ça sera la pagaille

Cliquez ici pour voir les démos : 

Pour la télécherger c’est là : https://github.com/brunnolou/react-morph

 

mike
mike.lecomte@nasdy.com

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.