How to add reactjs animation library and Animate .css to animate

Question

I have this simple Todo List,

I need to add animate.css library animations when adding and removing. I'm really new to react. I have read the documentation, but it's really hard to understand,

This is a question asking for help with coding.

http://jsfiddle.net/johnthethird/NXCyC/7/

/** @jsx React.DOM */
var TodoList = React.createClass({
  propTypes: {items: React.PropTypes.array},
  render: function() {
    var createItem = function(itemText) {
      return <li>{itemText}</li>;
    };
    return <ul>{this.props.items.map(createItem)}</ul>;
  }
});
var TodoApp = React.createClass({
  getInitialState: function() {
    return {items: [], text: ''};
  },
  onChange: function(e) {
    this.setState({text: e.target.value});
  },
  handleSubmit: function(e) {
    e.preventDefault();
    var nextItems = this.state.items.concat([this.state.text]);
    var nextText = '';
    this.setState({items: nextItems, text: nextText});
  },
  render: function() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <input onChange={this.onChange} value={this.state.text} />
          <button>{'Add #' + (this.state.items.length + 1)}</button>
        </form>
      </div>
    );
  }
});
React.renderComponent(<TodoApp />, document.body);

Answer 1

An old thread but I think I have an easy, straight forward solution for this.

I did it in this way, I downloaded the animate.css from the provider and wrote my styles.css importing animate.css as below.

@import "lib/animate.css";

.headerForm-enter {
    animation: 0.8s flipInX ease;
}

.headerForm-leave {
    animation: 0.5s flipOutX ease;
}

Note that I'm using the animations of animate.css in the react generated class. The ReactCSSTransitionGroup is as below.

<ReactCSSTransitionGroup
    transitionName='headerForm'
    transitionEnterTimeout={800}
    transitionLeaveTimeout={500}>
    {content}
</ReactCSSTransitionGroup>

Answer 2

Sebastien, you were on was on the right track, but I think you've misunderstood enter vs enterActive:

Working fiddle:

http://jsfiddle.net/mjv2y58o/

<ReactCSSTransitionGroup transitionName={{enter: "animated", enterActive: "bounce", leave: "animated",leaveActive: "tada"}}>

Your proposal to allow multiple classnames is still valid, as it would be useful for utility classes such as infinite, but it isn't required to get Animate.css working with react 0.14.

However, many of Animate.css's entry animations don't play nice with React, particularly in Safari. There is a brief delay after the component is added to the dom and before the animation starts, so on entry, you will get a flash of the component, before it gets hidden and animated into view.