Créer une transition de morphing

Une transition de transformation de forme fait passer progressivement un élément d’une forme ou d’une position à une autre.

Mesurez la mise en page initiale de l’élément avec getBoundingClientRect.

Comparez les positions initiale et cible pour déduire les valeurs de transformation.

Retournez une fonction CSS qui interpole entre l’état initial et l’état final.

Cette technique ressemble à la méthode FLIP utilisée par animate:flip.

Pour les éléments partagés entre plusieurs routes, des bibliothèques comme svelte-shared-transitions peuvent vous aider.

Calculez la mise à l’échelle et la translation pour transformer une position en une autre.

L’API View Transitions permet des transitions natives entre éléments partagés ; Svelte fonctionne bien avec elle.

Limitez-vous aux transformations et à l’opacité ; évitez d’animer les propriétés qui définissent la géométrie.

Utilisez des fonctions d’assouplissement pour un rendu naturel ; une courbe de Bézier cubique convient parfaitement aux transformations de forme.

Une fenêtre modale s’ouvre depuis le bouton cliqué, un élément de liste s’agrandit pour afficher les détails, ou des routes s’animent lors de la transition.

Les transitions de transformation de forme mesurent les positions de départ et d’arrivée, puis interpolent entre elles avec des chaînes CSS fondées sur des transformations.