Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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);
like image 241
Sahan Avatar asked Jun 18 '15 00:06

Sahan


2 Answers

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>
like image 164
Vishal Sharma Avatar answered Oct 21 '22 04:10

Vishal Sharma


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.

like image 23
Matt Avatar answered Oct 21 '22 03:10

Matt