トランジションとアニメーション
CSSトランジションの動作を制御するユーティリティ。
| クラス | スタイル |
|---|---|
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 ..."> 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>プレフィックスa transition-behavior ユーティリティ を、md: のようなブレークポイントバリアントで使用して、ユーティリティを適用するのはmedium 以上の画面サイズのみにしてください。
<button class="transition-discrete md:transition-normal ..."> <!-- ... --></button>variantsドキュメントで、variantsの使用方法について詳しく学んでください。