/animated-visibility

Animating Visibility with CSS: An Example of React Hooks

Primary LanguageJavaScript

Animating Visibility with CSS: An Example of React Hooks

Please see the Medium post for the tutorial for building this component.

Tags

The tutorial is arranged as an incremental set of tags.

baseline
Starting point: no animation

animation-holes
First draft of animation; item not removed from DOM flow

animation-no-holes
Better animation, item completely disappears.

component-class
Refactored a reusable component, uses React class components

component-function
Refactored a reusable component, uses React functional components

multiple-animations
Reuse the animation component in a sidebar and navbar

final
Final component, refactored as function based HOC