# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/transition-behavior.mdx

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.";

<ApiTable
  rows={[
    ["transition-normal", "transition-behavior: normal;"],
    ["transition-discrete", "transition-behavior: allow-discrete;"],
  ]}
/>

## 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

<ResponsiveDesign
  element="button"
  property="transition-behavior"
  defaultClass="transition-discrete"
  featuredClass="transition-normal"
/>