Animation

This is a wrapper to define animations in components. If the animations are not enabled the children components should render as usual. This uses react-transition-group.

Prop name	Type	Default	Description
animate	bool	`false`	Enable the animation for this component and its children.
show	bool	`true`	If animatable, should component start its animation or not.
children	func	Required	A function to render the children. It will receive an object parameter with information about the animation status, with the following properties: `status: string` - The `<Transition />` received status parameter. `entering: bool` - Started to be shown. `entered: bool` - Animation is completed and now is shown. `exiting: bool` - Started to be hidden. `exited: bool` - Animation is completed and now is hidden.
appear	bool	`true`	Do the animation on first mount. Passed down to `<Transition />`.
timeout	union	`0`	Animation enter and exit duration in ms. Passed down to `<Transition />`. One of type: `number`, `shape`

Source code: src/Animation Open in: Playground