# fade

> An opacity-only enter/exit transition: sugar over enterExit for a surface that fades in place.

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

An opacity-only enter/exit transition: sugar over enterExit for a
surface that fades in place.

## Signature

```ts
fade(options?: Fade.Options): CSSMixinDescriptor
```

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

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `options?` | `Fade.Options` | Exit-state opacity, timing, and entered-state selector. |

## Examples

```tsx
<div id="tooltip-1" popover="hint" mix={fade({ duration: durations.fast })}>
	Copied!
</div>;
```

## Used with it

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

### Fade.Options

#### Members

| Member | Type | Description |
| --- | --- | --- |
| `opacity?` | `number` | Exit-state opacity (0 to 1). Defaults to `0` — fully transparent when closed. |
| `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 overriding the default `[open]`/`:popover-open` entered state. |