反応コンポーネントでCSSTransitionグループを使用しているときに遷移がロードされない

Question

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

Answer 1

transitionEnterのみ既に搭載されている構成要素の後CSSTransitionGroupラッパーに追加される要素に適用される：ここ

コードのスニペットがあります。最初にコンポーネントを追加したときにフェードインアニメーションを作成する場合は、transitionAppearを使用する必要があります。 Read more about it here。

ので

あなたのCSSで

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

あなたがfade-enterアニメーションをコピーして、初期の実装アニメーションと追加入力するアニメーションが同じようにしたいと仮定すると、appearでenterを置き換えることができますようにあなたのtransitionOptionsを変更

。