ReactJS ReactCSSTransitionGroup不添加動畫

Question

我有一個新的ReactJS應用程序使用React starter kit。我試圖在使用ReactCSSTransitionGroup的視圖之間進行動畫處理，但不添加動畫類。我錯過了什麼？

import React, { PropTypes, Component } from 'react'; 
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; 
import styles from './App.css'; 
import withContext from '../../decorators/withContext'; 
import withStyles from '../../decorators/withStyles'; 
import Header from '../Header'; 
import Feedback from '../Feedback'; 
import Footer from '../Footer'; 

@withContext 
@withStyles(styles) 
class App extends Component { 

    static propTypes = { 
    children: PropTypes.element.isRequired, 
    error: PropTypes.object, 
    }; 

    render() { 
    return !this.props.error ? (
     <div> 
     <Header /> 
     <ReactCSSTransitionGroup 
      component="div" 
      className="animated" 
      transitionName="bounceInLeft" 
      transitionEnterTimeout={10000} 
      transitionLeaveTimeout={10000} 
     > 
      {React.cloneElement(this.props.children, {key: this.props.path})} 
     </ReactCSSTransitionGroup> 
     <Feedback /> 
     <Footer /> 
     </div> 
    ) : this.props.children; 
    } 

} 

export default App; 

Answer 1

組件看起來不錯。 CSS是什麼樣子？應該是這樣的：

:global .fade-enter {     
    opacity: 0.01;      
}          

:global .fade-enter.fade-enter-active { 
    opacity: 1;       
    transition: opacity 500ms ease-in; 
}          

:global .fade-leave {     
    opacity: 1;       
}          

:global .fade-leave.fade-leave-active { 
    opacity: 0.01;      
    transition: opacity 300ms ease-out; 
}          

也就是說，如果您使用CSS模塊。如果不是，我會查看path道具，並確保設置正確，因爲關鍵值是觸發動畫輸入/離開的內容。