# slide

> A fade paired with a directional offset, entering from just off one edge of its resting position and exiting back toward it: sugar over enterExit for Sheet, Drawer, and NavigationMenu-style surfaces.

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

A fade paired with a directional offset, entering from just off one edge
of its resting position and exiting back toward it: sugar over
enterExit for Sheet, Drawer, and NavigationMenu-style surfaces.

## Signature

```ts
slide(options: Slide.Options): CSSMixinDescriptor
```

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

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `options` | `Slide.Options` | Which edge to travel from, the offset distance, opacity, timing, and entered-state selector. |

## Examples

```tsx
<dialog id="cart-drawer" mix={slide({ from: "right", duration: durations.slow })}>
	...
</dialog>;
```

## Used with it

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

### Slide.Options

#### Members

| Member | Type | Description |
| --- | --- | --- |
| `from` | `From` |  |
| `distance?` | `string` | How far the exit state is offset along that edge. Defaults to `"0.5rem"`. |
| `opacity?` | `number` | Exit-state opacity (0 to 1). Defaults to `0`. |
| `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. |

### Slide.From

Which edge the host travels in from (and back out toward on exit).

#### Signature

```ts
type Slide.From = "top" | "right" | "bottom" | "left"
```

One of `"top"`, `"right"`, `"bottom"`, `"left"`.