Umid2018-08-13 14:52:38
Umid, 2018-08-13 14:52:38

Animation does not work when switching components, how to fix it?

import React, {Component} from 'react';
import './App.scss';

import {Router, Route} from 'react-router-dom';
import createHistory from "history/createBrowserHistory";

import MainPage from './MainPage/MainPage';
import Header from './Header/Header';

import About from './About/About';
import ReactCSSTransitionGroup from "react-addons-css-transition-group";

const history = createHistory();

class App extends Component {

    render() {
        return (
            <div className="App">

                <Header history={history}></Header>
                    <Router history={history}>
                            <Route exact path="/" component={MainPage}/>
                            <Route path="/about" component={About}/>

    export default App;

.anim-enter {
  opacity: .1;
.anim-enter.anim-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
.anim-leave {
  opacity: 1;
.anim-leave.anim-leave-active {
  opacity: .1;
  transition: opacity 300ms ease-in;

I have already tried many variations (including inside the component itself), and all to no avail, the components do not want to animate when switching from one to another.
Links are inside the Header component.
The router is working.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
Anton Spirin, 2018-08-13

Deprecated. Use react-transition-group

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question