O'Reilly logo

Mastering React by Ryan Vice, Adam Horton

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

CSS transitions using class switching

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.

Note

The source code of the cardflipanimation.zip file can be found at http://bit.ly/Mastering-React-10-flipanim-gist ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required