Transiciones y Animación
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>Prefija una utilidad transition-behavior con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:
<button class="transition-discrete md:transition-normal ..."> <!-- ... --></button>Aprende más sobre el uso de variantes en la documentación de variantes.