Question

我使用React starter kit获得了一个新的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道具，并确保正确设置，因为键值是触发动画进入/离开的内容。

ReactJS ReactCSSTransitionGroup不添加动画

1 个答案: