React animation when removing an element

Question

I am quite new to React. I am trying to learn by implementing a full CRUD. However, I am unable to get animation working well for removing a course from the list.

I have configured animation on transitionAppear and on transitionLeave. The transitionAppear works alright. I can't get the transitionLeave

This is my component: https://github.com/leonardoanalista/react-crud/blob/master/src/components/course/CourseListRow.js

This is the CSS for the animation: https://github.com/leonardoanalista/react-crud/blob/master/src/style.css#L66

Please let me know if there is a better approach.

Any help would be highly appreciated!

cheers Leonardo

Disconnection

Answer 1

You have ReactCSSTransitionGroup being rendered along with the group which is something you shouldn't be doing per here because the group needs to be mounted inside of the transition group. I understand that you want to do the transition on each row but for this to work it needs to be on a the tbody.

All what you need to do is take out ReactCSSTransitionGroup from CourseListRow component and add it to CourseList:

</thead>
<ReactCSSTransitionGroup
  transitionName="course-item"
  transitionLeave={true}
  transitionAppear={true}
  transitionAppearTimeout={2500}
  transitionEnterTimeout={1700}
  transitionLeaveTimeout={1000}
  component="tbody"
>
  {this.props.courses.map(course =>
    <CourseListRow key={course.id} course={course} removeCourse={this.props.removeCourse} />
  )}
</ReactCSSTransitionGroup>
</table>

I made a pull request on your repo with the bug fixed.

Since

Thank you Hussein! I thing I tried this approach but I didn't go up to the thead. ReactCSSTransitionGroup animations are really impressive. I copied the 2 files you changed manually to new commit: github.com/leonardoanalista/react-crud/commit/… – Disconnection

Sure! Can you accept the answer as the correct one? – Since