React animation when removing an element

Leonardo picture Leonardo · Dec 22, 2016 · Viewed 10.6k times · Source

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

Answer

Kafo picture Kafo · Dec 22, 2016

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.