過渡 & 動畫
transition-behavior
用於控制 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: 之類的中斷點變體，僅在以下情況下應用該工具類別中等 螢幕尺寸及以上
<button class="transition-discrete md:transition-normal ..."> <!-- ... --></button>瞭解更多關於在變體文件中使用變體的資訊。
