2

我是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>

4

1 回答 1

0

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

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>
于 2017-10-09T16:28:39.093 回答