JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 28
  • Score
    100M100P100Q59563F
  • License MIT

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

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 react-transition-group.

Usage

Example

<CSSAnimationGroup
  enterAnimation="bounceIn"
  enterDuration="200ms"
  enterTimingFunction="ease"
  exitAnimation="fadeOut"
  exitDuration="150ms"
  exitTimingFunction="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
  • exitAnimation leave animation name
  • exitDelay leave animation delay
  • exitDirection leave animation direction
  • exitDuration leave animation duration
  • exitFillMode leave animation fill mode
  • exitIterationCount leave animation iteration count
  • exitTimingFunction leave animation timing function

Any additional properties will be passed down to TransitionGroup.

Browser support

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