过渡和动画
transition-behavior
用于控制 CSS 过渡行为的工具。
| 类 | 样式 |
|---|---|
transition-normal | transition-behavior: normal; |
transition-discrete | transition-behavior: allow-discrete; |
示例(Examples)
¥Examples
基本示例(Basic example)
¥Basic example
使用 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)
¥Responsive design
在 transition-behavior 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<button class="transition-discrete md:transition-normal ..."> <!-- ... --></button>请参阅 变体文档 详细了解如何使用变体。