Animation

Swap timing modes

Trois badges échangent la même paire d'icônes côte à côte selon trois règles de sortie différentes, de sorte que les suppressions superposées, séquentielles et out-of-flow peuvent être comparées en un coup d'œil.

Overlap

Sequential

Reflow

Utiliser Swap timing modes

Testez l’aperçu avec la souris et le clavier, puis vérifiez la visibilité du focus et la mise en page sur un écran étroit. Indiquez le numéro ou l’identifiant du composant à votre agent de programmation.

Propriétés: duration, autoPlay, interval, showLabels, accent

Quels frameworks sont disponibles ?

Le catalogue propose ces versions : react, vue, svelte, astro, html. L’aperçu de cette page utilise React.

Comment accéder à l’implémentation ?

Le code, les portages, l’installation et le panneau de propriétés sont inclus dans Fieldbook Pro. L’aperçu interactif est ouvert à tous.

Connectez votre agent

Composants proches

1808Spring easing toggleAnimationUne tuile qui glisse entre deux arrêts sur une courbe à ressort cuite dans une transition simple CSS, avec la courbe générée tracée à côté.

1765Circular wipe switcherAnimationUn sélecteur de couleurs où le nouveau thème inonde toute la surface sous la forme d'un cercle s'étendant à partir du point exact sur lequel vous avez appuyé, tandis que l'anneau de sélection glisse entre les échantillons.

1766Color blend compareAnimationDeux échantillons bouclent entre la même paire de couleurs, l'un mélangé avec des valeurs de canal brutes et l'autre avec une lumière linéaire, montrant le creux provoqué par une transition simple.

1676Composable RevealAnimationUn emballage de révélation dont les parties diapositive, fondu, zoom et défocalisation peuvent chacune être activées et combinées en une seule transition à ressort.

1770Dismiss exit cardAnimationUne carte qui rétrécit et s'estompe lors de sa sortie et réapparaît lorsqu'elle est restaurée, avec la disposition environnante immobile pour que rien ne saute.

1772Easing preview tileAnimationUne tuile qui joue la même échelle sous n'importe quelle courbe d'assouplissement que vous choisissez, avec la courbe dessinée à côté et un marqueur qui la chevauche de manière synchronisée.