CODEWITHSUNDEEP
animationreactjs
stinogle
stinogle

Reputation: 347

ReactJS ReactCSSTransitionGroup not adding animation

I've got a new ReactJS app using the React starter kit. I'm trying to animate between views using ReactCSSTransitionGroup, but the animation classes aren't being added. What am I missing?

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;

Upvotes: 2

Views: 1968

Answers (1)

count1100
count1100

Reputation: 76

The component looks good. What does the CSS look like? Should be something like this:

: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;  
}

That is, of course, if you are using CSS Modules. If not, I'd look into the path prop and make sure that is being set correctly because the key value is what will trigger the animation enter/leave.

Upvotes: 6

Related Questions