transition-behavior

用于控制 CSS 过渡行为的工具类。

快速参考

类	属性
transition-normal	transition-behavior: normal;
transition-discrete	transition-behavior: allow-discrete;

示例

基础示例

使用 transition-discrete 工具类，在属性值属于离散集合时也能启动过渡，例如元素从 hidden 变为 block：

transition-normal

transition-discrete

<!-- [!code classes:transition-discrete] -->
<label class="peer ...">
  <input type="checkbox" checked />
</label>
<button class="hidden transition-all not-peer-has-checked:opacity-0 peer-has-checked:block ...">
  <!-- prettier-ignore -->
  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>

响应式设计

使用 md: 等断点变体作为 transition-behavior 工具类的前缀，即可仅在中等及以上屏幕尺寸下应用该工具类：

<button class="transition-discrete md:transition-normal ...">
 <!-- ... -->
</button>

了解如何使用变体，请参阅变体文档。