transition-behavior
En esta página
| Clase | Propiedades CSS |
|---|---|
transition-normal |
transition-behavior: normal; |
transition-discrete |
transition-behavior: allow-discrete; |
Examples#
Basic example#
Use the transition-discrete utility to start transitions when changing properties with a discrete set of values, such as elements that change from hidden to block:
{
<!-- [!code classes:transition-discrete] -->
<label class="peer ...">
<input type="checkbox" checked />
</label>
<button class="hidden transition-all not-peer-has-checked:opacity-0 peer-has-checked:block ...">
<!-- prettier-ignore -->
I hide
</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 ...">
I fade out
</button>