Transition Behavior - Tailwindcss

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:

<Figure hint="Interact with the checkboxes to see the expected behavior"> <Example> { <div className="flex flex-col justify-around gap-8 text-sm leading-6 font-bold text-white sm:flex-row sm:gap-0"> <div className="flex shrink-0 flex-col items-center sm:w-1/2"> <label className="peer mb-3 inline-flex gap-2 text-center font-mono text-xs font-medium text-gray-500 select-none dark:text-gray-400"> <input type="checkbox" defaultChecked /> transition-normal </label> <button className="hidden rounded-md bg-violet-500 px-4 py-2 text-sm font-semibold text-white transition-all transition-normal duration-300 not-peer-has-checked:opacity-0 peer-has-checked:block"> I hide </button> </div> <div className="flex shrink-0 flex-col items-center sm:w-1/2"> <label className="peer mb-3 inline-flex gap-2 text-center font-mono text-xs font-medium text-gray-500 select-none dark:text-gray-400"> <input type="checkbox" defaultChecked /> transition-discrete </label> <button className="hidden rounded-md bg-violet-500 px-4 py-2 text-sm font-semibold text-white transition-all transition-discrete duration-300 not-peer-has-checked:opacity-0 peer-has-checked:block"> I fade out </button> </div> </div> } </Example>

html

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

</Figure>

Responsive design