问在React组件中使用CSSTransition组时未加载过渡

EN

# ProfileList.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { CSSTransitionGroup } from 'react-transition-group';
import { fetchProfiles } from '../../actions';
import styles from './ProfileList.css';

class ProfileList extends Component {

  componentWillMount() {
    this.props.fetchProfiles();
  };

  renderProfile(profile) {

    return (
      <div 
        key={profile.CANDIDATEID}
        className={styles.profileList}
        >
        <span>
          <h4>{profile.FIRSTNAME}</h4>
          <h4>{profile.LASTNAME}</h4>
          <h4>{profile.name}</h4>
        </span>
        <p>{profile.city}</p>
        <h4>{profile.id}</h4>
        <p>Profile ID: {profile.CANDIDATEID}</p>
        <p>Years of experience</p>
        <a>{profile.email}</a> {/* change to lowerCase */}
      </div>
    )
  };

  render() {

    const { CANDIDATEID, FIRSTNAME, LASTNAME, } = this.props;

    const profileList = this.props.profiles.map(this.renderProfile) || 'no profiles';

    const transitionOptions = {
      transitionName: 'fade',
      transitionEnterTimeout: 1000,
      transitionLeaveTimeout: 1000
    }

    return (
      <div>
        These are the profiles:
        <CSSTransitionGroup { ...transitionOptions }>
          { profileList }
        </CSSTransitionGroup>
      </div>
    )
  }
};



const mapDispatchToProps = dispatch => bindActionCreators({ fetchProfiles }, dispatch);

const mapStateToProps = state => ({ 
  profiles: state.profiles,
  isLoading: state.profilesIsLoading
});

export default connect(mapStateToProps, mapDispatchToProps)(ProfileList);




 #ProfileList.css

.profileList {
  //border: 1px solid black;
}


/* starting state of animation */
.fade-enter {
  opacity: 0.01;
  right: 100px;
  border-color: red;
}


.fade-enter-active {
  transition: all 5000ms ease-in;
  border-color: blue;
}