Animate 
Edit
Simple interface to introduce animations to components.
Usage Usage
import { Animate } 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 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 Available Animation Types
appear 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 Options
| Name | Type | Default | Description |
|---|---|---|---|
origin |
string |
top center |
Point of origin (top, bottom,middle right, left, center). |
loading 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 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 Options
| Name | Type | Default | Description |
|---|---|---|---|
origin |
string |
left |
Point of origin (left). |