ReactJS ReactCSSTransitionGroup不添加动画

Question

我有一个新的ReactJS应用程序使用的反应起动机工具包。我试图使用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支柱并确保设置正确，因为关键值是什么将触发动画输入/离开。