Transition behavior

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx";

export const title = "transition-behavior"; export const description = "Utilities to control the behavior of CSS transitions.";

Examples

Basic example

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:

{

transition-normal I hide

transition-discrete I fade out

}

<!-- [!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>

Responsive design