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 ...
Get React: Building Modern Web Applications now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
