Skip to content

Instantly share code, notes, and snippets.

@JArmando
Last active August 31, 2017 15:36
Show Gist options
  • Save JArmando/e436729102cc1f6fcb1c to your computer and use it in GitHub Desktop.
Save JArmando/e436729102cc1f6fcb1c to your computer and use it in GitHub Desktop.
React Animations using animate.css

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment