without TransitionGroup component, demo dosen't work

Question

I use react-transition-group in my project. The whole project works well so far,but there is something confused me. The animation of the project dosen't work without TransitionGroup.

ReactDOM.render(
  <TransitionGroup>
    <CSSTransition
      appear={true}
      classNames="appAppear"
      timeout={500}
    >
      <App/>
    </CSSTransition>
  </TransitionGroup>,
  document.getElementById('root')
);

The document said 'The component manages a set of components in a list.' I still don't know why this hanppen. Can someone tell me ???

Answer 1

TransitionGroup manages timed mounting and un-mounting of components, which allows animations to start/end before mounting/un-mounting them. Whereas CSSTransition manages classnames based on current mount state like appear, enter, done, etc).

If you want to know how each of these components work, take a look at their source code:

https://github.com/reactjs/react-transition-group/blob/master/src/TransitionGroup.js

https://github.com/reactjs/react-transition-group/blob/master/src/CSSTransition.js