React CSS Transition provides a reliable way to transition your components between two states across browers.
npm install react-css-transition --save- 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
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={active}
>
<MyComponent {...rest} />
</CSSTransition>
);A transition group that fades in and out its children when entering or leaving the DOM:
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>
);MIT