React-transition-group

Tutorial for React animations. React Transition Group is not an animation library, it does not animate styles by itself. Instead it exposes transition stages, manages classes and group elements and manipulates the DOM in useful ways, making the implementation of actual visual transitions much easier. Docs: https://reactcommunity.org/react-transition-group. Nice youtube tutorial: https://www.youtube.com/watch?v=dwIyD0xaN_0.

3 flashcards · Programming Languages · by lakesare

1. Name 3 components you can import from 'react-transition-group': import { a, b, c } from 'react-transition-group';

   Transition CSSTransition TransitionGroup Transition is a platform-agnostic base component. If you're using transitions in CSS, you'll probably want to use CSSTransition instead. It inherits all the features of Transition, but contains additional features necessary to play nice with CSS transitions (hence the name of the component).

2. Name 3 props that can passed to <CSSTransition/>.

   in - whether to show the component; triggers the enter or exit states timeout - amount of milliseconds it will take for the element to enter or leave the DOM. classNames - classNames="fade" applies fade-enter, fade-enter-active, fade-enter-done, fade-exit, fade-exit-active, fade-exit-done, fade-appear, fade-appear-active, and fade-appear-done. <CSSTransition in={this.state.display} timeout={350} classNames="display" > <h1>Hi</h1> </CSSTransition>

3. If we use classNames="fade", what classNames will be applied?

   fade-appear, fade-appear-active, fade-appear-done, fade-enter, fade-enter-active, fade-enter-done, fade-exit, fade-exit-active, and fade-exit-done. fade-appear-done and fade-enter-done will both be applied. This allows you to define different behavior for when appearing is done and when regular entering is done, using selectors like .fade-enter-done:not(.fade-appear-done). By convention, when we add a new item, the Item components will get the {{basis}}-enter CSS class, and the {{basis}}-enter-…