Notwithstanding Precautions, Misadventure

    react-css-animation-group

    2.4.0 • Public • Published

    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.

    Install

    npm i react-css-animation-group

    DownloadsWeekly Downloads

    18

    Version

    2.4.0

    License

    MIT

    Unpacked Size

    59.5 kB

    Total Files

    8

    Last publish

    Collaborators

    • jacobbuck