Coordonnez les durées et les courbes d’animation.
Utilisez les variables publiques de durée et de courbe pour coordonner les transitions de votre application avec les contrôles Liquidify.
.details {
transition:
opacity var(--lq-duration-fast) var(--lq-easing-decelerate),
transform var(--lq-duration-fast) var(--lq-easing-decelerate);
}
.details[data-hidden="true"] {
opacity: 0;
transform: translateY(var(--lq-space-4));
}Les durées vont de instant à lazy. Les courbes comprennent les variantes standard, d’accélération, de décélération et de ressort. Les tokens d’échelle au survol ou à l’appui, de clarté et de durée d’appui sont des entrées du moteur des contrôles.
Le mouvement ne doit pas être nécessaire pour comprendre un changement d’état. Désactivez vos transitions lorsqu’une réduction du mouvement est demandée :
@media (prefers-reduced-motion: reduce) {
.details {
transition: none;
}
}Pour les animations à ressort hors du paquet de composants, consultez @liquidify/motion.