React CSS 转换不起作用

Question

我是javascript新手，刚接触编码，希望高手多多指教。我正在尝试使用 'react-transition-group' 进行 CSS 转换，但它不起作用。我不明白为什么它不起作用：动画就是不显示。控制台不显示任何错误。这是我的代码：

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

试试这个配置，这就是我们的设置和工作方式。

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 转换不起作用

React CSS transitions doesn't work

reactjs

react-transition-group