Simple animations can be done with CSS class changes (the
className attribute in React). The
classNames library used in our prototype blog app, which closely resembles
ng-class (for those familiar with Angular JS), is a handy way to construct CSS class name sets based on component state.
In this example, component state is used to drive class names on a tag. This is one of the simplest ways to achieve animation effects using React. An interesting UI pattern for hiding configuration controls, or extra information, is to make a card component. When triggered, the card flips over to reveal another view with the extra info.
The source code of the
cardflipanimation.zip file can be found at http://bit.ly/Mastering-React-10-flipanim-gist ...