过渡和动画
transition-behavior
用于控制 CSS 过渡行为的工具。
| 类 | 样式 |
|---|---|
transition-normal | transition-behavior: normal; |
transition-discrete | transition-behavior: allow-discrete; |
示例(Examples)
基本示例(Basic example)
在使用具有离散值集合的属性更改时，例如从 hidden 变为 block 的元素，请使用 transition-discrete 工具启动过渡效果：
🌐 Use the transition-discrete utility to start transitions when changing properties with a discrete set of values, such as elements that change from hidden to 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>响应式设计(Responsive design)
在 transition-behavior 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<button class="transition-discrete md:transition-normal ..."> <!-- ... --></button>请参阅 变体文档 详细了解如何使用变体。