當在反應組件中使用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。

更改transitionOptions像這樣

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

在你的CSS，你可以複製fade-enter動畫與appear取代enter，假設你想在初始安裝動畫和附加輸入動畫相同。