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道具，并确保设置正确，因为关键值是触发动画输入/离开的内容。