Переходы и анимация
Утилиты для управления поведением CSS-переходов.
| Class | Styles |
|---|---|
transition-normal | transition-behavior: normal; |
transition-discrete | transition-behavior: allow-discrete; |
Используйте утилиту transition-discrete, чтобы запускать переходы при изменении свойств с дискретным набором значений, таких как элементы, которые изменяются с hidden на block:
Взаимодействуйте с флажками, чтобы увидеть ожидаемое поведение
<label class="peer ..."> <input type="checkbox" checked /></label><button class="hidden transition-all not-peer-has-checked:opacity-0 peer-has-checked:block ..."> Я скрываюсь</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 ..."> Я исчезаю</button>Префикс a transition-behavior утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<button class="transition-discrete md:transition-normal ..."> <!-- ... --></button>Подробнее об использовании вариантов читайте в документации по вариантам.