Transitions & Animation
用於控制 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 ..."> 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>在 transition-behavior 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<button class="transition-discrete md:transition-normal ..."> <!-- ... --></button>在變體文件中了解更多關於使用變體的資訊。