# transition-behavior

> Applies the `transition-behavior` property on its own; `"allow-discrete"` lets a discrete property such as `display` or `content-visibility` animate across a transition, commonly paired with `@starting-style`.

```ts
import { transitionBehavior } from "@sdxc/u/effects";
```

Applies the `transition-behavior` property on its own; `"allow-discrete"`
lets a discrete property such as `display` or `content-visibility` animate
across a transition, commonly paired with `@starting-style`.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.transitionBehavior("allow-discrete")` | `css({ transitionBehavior: "allow-discrete" })` |

## Examples

### Basic example

Use `transitionBehavior("allow-discrete")` to let discrete properties like `display` transition, so an element can fade in and out as it's shown and hidden. Toggle the popover:

```tsx
<div>
	<button type="button" popovertarget="note" mix={[...]}>
		Toggle note
	</button>
	<div
		id="note"
		popover
		mix={[
			transition("opacity, display, overlay", { duration: 300 }),
			transitionBehavior("allow-discrete"),
			opacity(0),
			open(opacity(100)),
			startingStyle(open(opacity(0))),
			...,
		]}
	>
		Saved a minute ago.
	</div>
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.transitionBehavior("allow-discrete"))
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.transitionBehavior("allow-discrete"))
```

## Signature

```ts
u.transitionBehavior(value: TransitionBehaviorValue)
```