Lzh on GitHub

transition-behavior

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

快速参考

类名样式
transition-normaltransition-behavior: normal;
transition-discretetransition-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>

在 变体文档 中了解更多关于使用变体的信息。