React CSS transitions doesn't work

Question

I'm new in javascript and coding and hope that professionals can give me advice. I'm trying to make CSS transitions with 'react-transition-group', but it doesn't work. I can't understand why it doesn't work: animations just don't show up. Console doesn't show any errors. here is my code:

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
import { TransitionGroup, CSSTransition } from 'react-transition-group';

export class App extends React.Component {

  render() {
    return (
      <TransitionGroup>
        <CSSTransition key={location.pathname.split('/')[1] || '/'} timeout={{enter: 300, exit: 200 }} classNames="fade" appear>
          <BrowserRouter>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/sign-up" component={RegistrationApp} />
            </Switch>
          </BrowserRouter>
        </CSSTransition>
      </TransitionGroup>
    );
  }
}

.fade-appear,
.fade-enter {
  opacity: 0;
}

.fade-appear-active,
.fade-enter-active {
  transition: opacity .3s linear;
  opacity: 1;
}

.fade-exit {
  transition: opacity .2s linear;
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

score 0 · Accepted Answer · answered Oct 09 '17 at 16:28

Try this configuration, this is how we have it setup in ours and its working.

import { CSSTransitionGroup } from 'react-transition-group';    
<BrowserRouter>
 <Route
   render={ ({ location }) => (
    <CSSTransitionGroup
          component='div'
          className='put-your-classname-here'
          transitionEnter='put-your-classname-here'
          transitionLeave='put-your-classname-here'
          transitionName='put-your-classname-here'
          transitionEnterTimeout={ 700 }
          transitionLeaveTimeout={ 700 }
        >
          <Switch key={ location.key } location={ location }>
            <Route exact path="/" component={Home} />
            <Route path="/sign-up" component={RegistrationApp} />
          </Switch>
        </CSSTransitionGroup>
  )}
 />
</BrowserRouter>

React CSS transitions doesn't work

1 Answers1