animation - ReactJS ReactCSSTransitionGroup 不添加动画

Question

我有一个使用 React 的新 ReactJS 应用 starter kit .我正在尝试使用 ReactCSSTransitionGroup 在 View 之间制作动画，但未添加动画类。我错过了什么？

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 属性并确保其设置正确，因为关键值将触发动画进入/离开。