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
