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

Animating DOM enter and exit

Being able to introduce UI elements and dismiss them in a way that's fluid and not abrupt is an important part of a nice user experience. Having elements pop in and out of the DOM can be jarring. To animate components entering and leaving the DOM, React supplies a pair of interfaces: ReactTransitionGroup and ReactCSSTransitionGroup. These interfaces provide hooks to component mounting and unmounting lifecycle events. For ReactCSSTransitionGroup, the hooks are the automatic addition and removal of CSS class names using a documented naming convention. In these examples, we'll use the ReactCSSTransitionGroup interface.

Popover menus

The first example of DOM enter and exit animation is a popover menu. You've probably seen ...

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