{
  "$type": "site.standard.document",
  "path": "/animations-with-react/",
  "publishedAt": "2016-10-02T14:26:38.000Z",
  "site": "at://did:plc:6gssgguzeecdttuw4gpdshg2/site.standard.publication/self",
  "tags": [
    "react",
    "javascript",
    "reddit"
  ],
  "textContent": "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/\n\nThe app is a react front end for Reddit. It uses a standard stack that includes react-router and redux.\n\n[Image: 9f7648b8-830f-11e6-9a87-af3747434cf0.png]\n\nThis 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\n\nFirst, install the package with npm.\n\n[Code block]\n\nNow 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.\n\n[Code block]\n\nThen 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.\n\n[Code block]\n\nHere is the commit that adds this feature my reactit demo app: https://github.com/brookslyrette/reactit/commit/1a8adb231ad63f5083eb12e39ccd388e107567b3\n\nHappy coding!\n\nRead the original post with all embeds and interactive content at https://rants.broonix.ca/animations-with-react/",
  "title": "Animations with React"
}