Animator

Notes

An animation utility for preset entrance/exit animations using React Transition Group. If rendering more than one child, or toggling the state of a single child, be sure each child has a unique key.

Props

  • animationoneOf('fade', 'grow', 'explode', 'fadeGrow')['fadeGrow']

    The name of the animation to be applied to children. Defaults to 'fadeGrow'.

  • childrenany

When using a single child, it will animate in when first rendered, and animates out when unmounted.

Crossfade two elements by conditionally rendering. Be sure each child has a unique key, and also that the children are absolutely positioned.

A single child can be animated in and out when updating props. Be sure the two states provide a unique key on the child.

A list can be managed with Animator, with entrance and exit animations for new or exiting items.