React ~ Router ~ Animated Transitions - rohit120582sharma/Documentation GitHub Wiki

React Transition Group is an animation library that gives us a way to perform animations when a React component enters or leaves the DOM, which, paired with React Router.

TransitionGroup renders all its new and old children after passing certain props to each based on if they're new, old, or the same. Whereas CSSTransition applies a pair of class names to its children during the 'appear', 'enter', and 'exit' stages of the transition based on their status.

.fade-enter {
    opacity: 0;
    z-index: 1;
}
.fade-enter.fade-enter-active {
    opacity: 1;
    transition: opacity 250ms ease-in;
}
.fade-exit {
    opacity: 0
}
import {
    TransitionGroup,
    CSSTransition
} from "react-transition-group";

class App extends React.Component {
    render() {
        return (
            <Route path="*" component={AnimationApp} />
        );
    }
}
class AnimationApp extends React.Component {
    ...
    render() {
        const { location } = this.props;
        return (
            <TransitionGroup>
                <CSSTransition
                    key={location.key}
                    classNames='fade'
                    timeout={300}>
                    <Switch location={location}>
                        <Route path="/home" component={Home} />
                        <Route path="/about" component={About} />
                    </Switch>
                </CSSTransition>
            </TransitionGroup>
        );
    }
}
⚠️ **GitHub.com Fallback** ⚠️