过渡 & 动画
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>在变体文档中了解有关使用变体的更多信息。
