0

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

我怎样才能弄清楚我做错了什么？

这是代码片段：

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

1 回答 1

0

transitionEnter仅适用于 CSSTransitionGroup在组件已安装后添加到包装器的元素。如果要在初始添加组件时制作淡入动画，则需要使用transitionAppear. 在此处阅读有关它的更多信息。

改变你的transitionOptions喜欢

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

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

于 2017-05-31T11:12:37.947 回答