@wordpress/components
Version:
UI components for WordPress.
54 lines (36 loc) • 2.29 kB
Markdown
# Animate
Simple interface to introduce animations to components.
## Usage
```jsx
import { Animate, Notice } from '@wordpress/components';
const MyAnimatedNotice = () => (
<Animate type="slide-in" options={ { origin: 'top' } }>
{ ( { className } ) => (
<Notice className={ className } status="success">
<p>Animation finished.</p>
</Notice>
) }
</Animate>
);
```
## Props
| Name | Type | Default | Description |
| ---------- | ---------- | ----------- | -------------------------------------------------------------------------------------------- |
| `type` | `string` | `undefined` | Type of the animation to use. |
| `options` | `object` | `{}` | Options of the chosen animation. |
| `children` | `function` | `undefined` | A callback receiving a list of props ( `className` ) to apply to the DOM element to animate. |
## Available Animation Types
### appear
This animation is meant for popover/modal content, such as menus appearing. It shows the height and width of the animated element scaling from 0 to full size, from its point of origin.
#### Options
| Name | Type | Default | Description |
| -------- | -------- | ------------ | -------------------------------------------------------------------- |
| `origin` | `string` | `top center` | Point of origin (`top`, `bottom`,` middle right`, `left`, `center`). |
### loading
This animation is meant to be used to indicate that activity is happening in the background. It is an infinitely-looping fade from 50% to full opacity. This animation has no options, and should be removed as soon as its relevant operation is completed.
### slide-in
This animation is meant for sidebars and sliding menus. It shows the height and width of the animated element moving from a hidden position to its normal one.
#### Options
| Name | Type | Default | Description |
| -------- | -------- | ------- | ------------------------- |
| `origin` | `string` | `left` | Point of origin (`left`). |