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

Question

我正在尝试将react-transition-group 实施到一个项目中，但我无法让它工作。我可以看到我的项目被包裹在 <CSSTransition /> 组件中，但我无法让它们动画化。

我怎样才能知道我做错了什么？

这是一个sn-p的代码：

# 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;
}

Answer 1

transitionEnter 仅适用于在组件已安装后添加到 CSSTransitionGroup 包装器的元素。如果要在初始添加组件时制作淡入动画，则需要使用transitionAppear。 Read more about it here.

像这样改变你的transitionOptions

transitionName: 'fade',
transitionAppear: true,
transitionAppearTimeout: 1000,
transitionEnter: true,
transitionEnterTimeout: 1000
transitionLeave: false

在您的 CSS 中，您可以复制 fade-enter 动画并将 enter 替换为 appear，假设您希望初始安装动画和其他进入动画相同。