React Animations using animate.css

ReactAnimations.md

ReactAnimations with animate.css:

Say you want to animate a list of items. Wrap these children components in a <ReactCssTransitionGroup> and set the animation settings (duh) similar to this:

//… the rest of the component declaration
// … this goes in the render function
render: function(){
	var ReactCssTransitionGroup = React.addons.cssTransitionGroup;

	var myItemList = this.props.items.map(function(element){
		return (
			<div key={element.id}>
				<MyChildComponent self={ element }/>
			 </div>
		);
	 });
	
	return(
		<ReactCssTransitionGroup transitionName=“item-list-base-class”>
			{ myItemList }
		</ReactCssTransitionGroup>
	 );

}

The key is the key for this to work properly, make sure all your children have a unique key (on the top component element, in this case, the div).

The React animations are inspired by ngAnimate (angular animations) so your scss is where the different scenarios are covered: (scss is prefered in order to easily extend animate.css classes)

.item-list-base-class-enter{
	@extend .animated;
	@extend .bounceInLeft;
 }

enter, leave, active are conventions taken from ngAnimate, for further information visit the ngAnimate documentation