Package Exports

react-css-animation-group

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-css-animation-group) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-css-animation-group

Use CSS Animations when a React component enters or leaves the DOM.

Based on the TransitionGroup API.

Usage

Example

  <CSSAnimationGroup
    enterAnimation="bounceIn"
    enterDuration="200ms"
    enterTimingFunction="ease"
    leaveAnimation="fadeOut"
    leaveDuration="150ms"
    leaveTimingFunction="linear"
  >
    {children}
  </CSSAnimationGroup>

Properties

enterAnimation enter animation name
enterDelay enter animation delay
enterDirection enter animation direction
enterDuration enter animation duration
enterFillMode enter animation fill mode
enterIterationCount enter animation iteration count
enterTimingFunction enter animation timing function
leaveAnimation leave animation name
leaveDelay leave animation delay
leaveDirection leave animation direction
leaveDuration leave animation duration
leaveFillMode leave animation fill mode
leaveIterationCount leave animation iteration count
leaveTimingFunction leave animation timing function
runOnMount if true, runs the enter animation on mount

Any additional properties will be passed down to TransitionGroup.

Browser support

Works on browsers with CSS Animation, otherwise will gracefully degrade.