Animations with React
I've been working on a demo app to keep my 'react fu' strong. You can check out the app here: https://github.com/brookslyrette/reactit/
The app is a react front end for Reddit. It uses a standard stack that includes react-router and redux.
This week I'm going to look at how to add some simple animations to this app. React provides a library to use for these types of animations: https://facebook.github.io/react/docs/animation.html
First, install the package with npm.
npm install react-addons-css-transition-group
Now lets defined the CSS for this transition. When animating two classes will be added to the control. .{transitionName}-{transitionType}
first, then .{transitionName}-{transitionType}-active
. The appear transition will start with opacity 0.01
and transition to being fully visible.
.items-appear {
opacity: 0.01;
}
.items-appear.items-appear-active {
opacity: 1;
transition: opacity 300ms ease-in;
}
Then to enable this transition we need to add it to the components markup. I'll be animating the ListingItem.js
component. Now that the transition timeout in the component and CSS should match. Here they are both set to 300ms.
render() {
return (
<ReactCSSTransitionGroup transitionName="items"
transitionAppear={true} transitionAppearTimeout={300}>
{/* old jsx for control */}
</ReactCSSTransitionGroup>
);
}
Here is the commit that adds this feature my reactit demo app: https://github.com/brookslyrette/reactit/commit/1a8adb231ad63f5083eb12e39ccd388e107567b3
Happy coding!