1

I'm looking to use the React Transition Group library to animate some stuff in my React page. According to those docs, the TransitionGroup component does the following:

The <TransitionGroup> component manages a set of transition components ( and <CSSTransition>) in a list. Like with the transition components, <TransitionGroup> is a state machine for managing the mounting and unmounting of components over time.

Consider the example below. As items are removed or added to the TodoList the in prop is toggled automatically by the <TransitionGroup>.

I'm not really sure what that means or why it's important.

Also, when I modify the example code that they embed on the documentation page so that the <TransitionGroup> tags are replaced with <ul> tags everything seems to work just fine (I can remove todo items by clicking on them, I can add new todo items).

Why is <TransitionGroup> component necessary? What does it do? (And why do things appear to work just fine when I replace it with an unordered list?)

MikeTheTall
  • 3,214
  • 4
  • 31
  • 40

1 Answers1

1

React Transition Group has some advantages over typical css animations.These are some points that are coming to my mind.

  1. Its uses binding to change classes for a components. eg: enter, appear, enter-active, appear-active, exit, exit-active etc are all part of animation classes. This make it really interactive interms of rich animations which you can not achive otherwise.

  2. It has advatage to unmount your component using javascript, once animation is done. So basically no extra load on your front end.

  3. It gives your freedom to define animations which ever way you like. Either css classes or defineing your own styles with in js file.

  4. It gives you various type of animation options. Eg: Switch Transitions, Transition Groups, CssTransitions etc.

I would suggest to keep experimenting with typical css animations and react transition group and come to your own conclusion.

Waleed Tariq
  • 825
  • 8
  • 19
  • 2
    Thank you for the thoughtful answer! I'm looking for info about the TransitionGroup component specifically, but your answer about the overall React Transition Group library overall is solid! – MikeTheTall Aug 29 '21 at 15:40
  • @MikeTheTall I am in the same boat and trying to understand why exactly is `TransitionGroup` component required? As animations on list can be independently managed by the list component when they are mounting/unmounting. Let me know if you understood its purpose. – darKnight Aug 31 '22 at 21:04