Transiciones y Animaciones
Utilidades para controlar el comportamiento de las transiciones CSS.
| Clase | Estilos |
|---|---|
transition-normal | transition-behavior: normal; |
transition-discrete | transition-behavior: allow-discrete; |
Usa la utilidad transition-discrete para iniciar transiciones al cambiar propiedades con un conjunto discreto de valores, como elementos que cambian de hidden a block:
Interactúa con las casillas de verificación para ver el comportamiento esperado
<label class="peer ..."> <input type="checkbox" checked /></label><button class="hidden transition-all not-peer-has-checked:opacity-0 peer-has-checked:block ..."> Me oculto</button><label class="peer ..."> <input type="checkbox" checked /></label><button class="hidden transition-all transition-discrete not-peer-has-checked:opacity-0 peer-has-checked:block ..."> Me desvanezco</button>Antepone a la utilidad transition-behavior el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<button class="transition-discrete md:transition-normal ..."> <!-- ... --></button>Obtén más información sobre el uso de variantes en la documentación de variantes.