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);
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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With