Package Exports

react-css-transition

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-transition) 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-transition

React CSS Transition provides a reliable way to transition your components between two states across browers.

Read the full documentation

Installation

npm install react-css-transition --save

Features

Transition between the default state and the active state
Perform a reverse transition when interrupted
Define transitions using inline styles or CSS classes
Transition components when entering or leaving the DOM
Notifiy when a transition has finished
Support the application of initial values before a transition
Includes typescript definitions

Examples

A component that fades in when props changes to active=true and fades out when active=false:

import * as React from "react";
import { CSSTransition, transit } from "react-css-transition";

const FadeInOutComponent = ({active, ...rest}) => (
  <CSSTransition
    defaultStyle={{ opacity: 0 }}
    enterStyle={{ opacity: transit(1.0, 500, "ease-in-out") }}
    leaveStyle={{ opacity: transit(0, 500, "ease-in-out") }}
    activeStyle={{ opacity: 1.0 }}
    active={props.active}
  >
    <MyComponent {...rest} />
  </CSSTransition>
);

A transition group that fades in and out its children:

import { CSSTransitionGroup, CSSTransition, transit } from "react-css-transition";

const FadeInOut = (props) => (
  <CSSTransition
    {...props}
    defaultStyle={{ opacity: 0 }}
    enterStyle={{ opacity: transit(1.0, 500, "ease-in-out") }}
    leaveStyle={{ opacity: transit(0, 500, "ease-in-out") }}
    activeStyle={{ opacity: 1.0 }}
  />
);

const FadeInOutGroup = (props) => (
  <CSSTransitionGroup {...props}>
    {
      React.Children.map(
        props.children,
        (child) => <FadeInOut>{child}</FadeInOut>,
      )
    }
  </CSSTransitionGroup>
);

License

MIT