# enterExit

> Composes a CSS-only enter/exit transition mixin whose `@starting-style` block animates the first entered paint from the exit values.

```ts
import { enterExit } from "@sdxc/ui/animations";
```

Composes a CSS-only enter/exit transition mixin whose `@starting-style`
block animates the first entered paint from the exit values. Owns the
host's `transition`, so apply exactly one animation factory per host.

## Signature

```ts
enterExit(options?: EnterExit.Options): CSSMixinDescriptor
```

Returns: A `css()` mixin ready for a host element's `mix` prop.

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `options?` | `EnterExit.Options` | Which axes to animate, the timing, and the entered-state selector. |

## Examples

```tsx
<div id="filters" popover="auto" mix={enterExit({ opacity: 0, scale: 0.95, duration: 150 })}>
	...
</div>;
```

```tsx
<div data-visible mix={enterExit({ opacity: 0, when: "[data-visible]" })}>...</div>;
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/animations` too.

### EnterExit.Options

Every field is the host's closed/exit-state value for one CSS property;
the entered state is always that property's reset (`1` for opacity,
`none` for `scale`/`translate`). Omitted fields leave their property as is.

#### Members

| Member | Type | Description |
| --- | --- | --- |
| `opacity?` | `number` | Exit-state `opacity`, 0 to 1. |
| `scale?` | `number` | Exit-state `scale` factor, e.g. `0.95`. |
| `translate?` | `string` | Exit-state `translate` value, e.g. `"0 0.5rem"`. |
| `duration?` | `number` | Transition duration in milliseconds. Defaults to `durations.normal`. |
| `easing?` | `string` | A `transition-timing-function` value. Defaults to `easings.standard`. |
| `when?` | `string` | A selector fragment relative to the host (e.g. `"[data-visible]"`) marking the entered state, replacing the `[open]`/`:popover-open` default for hosts that carry their own entered-state attribute. |