Coordina duraciones y curvas de animación.
Usa las variables públicas de duración y curva para coordinar las transiciones de tu aplicación con los controles 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));
}Las duraciones van de instant a lazy. Las curvas incluyen variantes estándar, de aceleración, desaceleración y resorte. Los tokens de escala al pasar el puntero o pulsar, claridad y duración de pulsación son entradas del motor de controles.
El movimiento no debe ser necesario para entender un cambio de estado. Desactiva las transiciones propias cuando se solicite movimiento reducido:
@media (prefers-reduced-motion: reduce) {
.details {
transition: none;
}
}Para animaciones de resorte fuera del paquete de componentes, consulta @liquidify/motion.