# enterExit

> Composes a CSS-only enter/exit transition mixin: `@starting-style` paints the first entered frame from the entry values, and closing transitions to the exit values on the exit timing.

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

Composes a CSS-only enter/exit transition mixin: `@starting-style` paints
the first entered frame from the entry values, and closing transitions to
the exit values on the exit timing. Every change is a transition, so a
reversal mid-flight retargets smoothly. 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` | Entry and exit values, their 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>;
```

```tsx
<dialog mix={enterExit({ translate: "100% 0", exit: { translate: "1rem 0", opacity: 0, blur: 4 } })}>...</dialog>;
```

## Used with it

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

### EnterExit.Values

The off-stage value of each animated CSS property; the entered state is
always that property's reset (`1` for opacity, `none` for `scale`,
`translate` and `filter`). Omitted fields leave their property as is.

#### Members

| Member | Type | Description |
| --- | --- | --- |
| `opacity?` | `number` | Off-stage `opacity`, 0 to 1. |
| `scale?` | `number` | Off-stage `scale` factor, e.g. `0.95`. |
| `translate?` | `string` | Off-stage `translate` value, e.g. `"0 0.5rem"`. |
| `blur?` | `number` | Off-stage `filter: blur()` radius in pixels, e.g. `4`. |

### EnterExit.Options

The top-level values are where the host enters from. `exit` overrides
any of them for where it leaves to, and a property only `exit` names
enters from its reset, so a surface can blur away without blurring in.

#### Members

| Member | Type | Description |
| --- | --- | --- |
| `exit?` | `Values` | Where the host leaves to, per property; each omitted field reuses its entry value. |
| `duration?` | `number` | Entry duration in milliseconds. Defaults to `durations.normal`. |
| `easing?` | `string` | A `transition-timing-function` value for the entry. Defaults to `easings.standard`. |
| `exitDuration?` | `number` | Exit duration in milliseconds. Defaults to three quarters of `duration`. |
| `exitEasing?` | `string` | A `transition-timing-function` value for the exit. Defaults to `easing`. |
| `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. |