Réagir CSS transitions ne fonctionne pas

Question

Je suis nouveau dans le javascript et le codage et j'espère que les professionnels peuvent me donner des conseils. J'essaie de faire des transitions CSS avec 'react-transition-group', mais ça ne marche pas. Je n'arrive pas à comprendre pourquoi ça ne marche pas: les animations n'apparaissent pas. La console n'affiche aucune erreur. voici mon 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>

Answer 1

Essayez cette configuration, c'est la façon dont nous avons la configuration dans le nôtre et son travail.

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>