如何为动态reactjs组件设置动画

Question

我的反应组件有动画问题。当我添加“动画淡入淡出”类时，我的组件只会动画一次。

组件文件

import React, { Component } from 'react';
import Img from 'react-image';
import {Animated} from "react-animated-css";
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

  const spinner = (
    <div className="sk-fading-circle">
      <div className="sk-circle1 sk-circle"></div>
      <div className="sk-circle2 sk-circle"></div>
      <div className="sk-circle3 sk-circle"></div>
      <div className="sk-circle4 sk-circle"></div>
      <div className="sk-circle5 sk-circle"></div>
      <div className="sk-circle6 sk-circle"></div>
      <div className="sk-circle7 sk-circle"></div>
      <div className="sk-circle8 sk-circle"></div>
      <div className="sk-circle9 sk-circle"></div>
      <div className="sk-circle10 sk-circle"></div>
      <div className="sk-circle11 sk-circle"></div>
      <div className="sk-circle12 sk-circle"></div>
    </div>
  );

  class Org extends Component {
    render(){
      var copy = Object.assign({}, this.props.selectedOrg);
      return(
      <Animated animationIn="fadeIn" animationOut="fadeOut" isVisible={true}>
          <div className="card" ref="box" style={{width: '18rem'}}>
              <Img className='card-img-top' src={copy.avatar_url} loader={spinner}/>
              <div className="card-body">
                <p className="card-text">{copy.login}</p>
                <p className="card-text">{copy.description}</p>
              </div>
          </div>
        </Animated>
      );
    }
  }

export default Org;

app文件部分

return (
  <Router>
    <div className="App">
    <center><Link to={'/'}>Home</Link></center>
      <div className="main container row">
        <div className="col-lg-5 col-sm-5">
          <ul className="list-group list-of-orgs list-group-flush">
            {
              this.state.orgs.map(function(org, index) {
                return(
                  <Link to={`/org/${org.id}`} key={index} className="listLink">
                    <li className="list-group-item d-flex justify-content-between align-items-center list-group-item-action">
                      {org.login}
                      <span className="badge badge-primary badge-pill">{org.id}</span>
                    </li>
                    <br />
                  </Link>
                );
              })
            }
          </ul>
        </div>
        <div className="col-lg-7 col-sm-7">
          <Route path="/" component={Home} exact={true}/>
        {this.state.orgs && (
          <Route path="/org/:orgId" render={({ match }) => {
            return(
              <Org selectedOrg={this.state.orgs.find(o => o.id == match.params.orgId )} />
            );
          }} />
        )}
        </div>
      </div>
    </div>
  </Router>
);

因此，当我选择第一个org时，它会附带fadeIn动画，但是当我点击列表中的下一个org时，我没有得到fadeIn动画。