移除元素时的React动画

Question

我对React还不够熟悉。我试图通过实现完整的CRUD来学习。但是，我无法很好地实现从列表中删除课程的动画效果。

我已在`transitionAppear`和`transitionLeave`上配置了动画。`transitionAppear`运行良好，但我无法让`transitionLeave`生效。

这是我的组件： https://github.com/leonardoanalista/react-crud/blob/master/src/components/course/CourseListRow.js 这是动画的CSS样式： https://github.com/leonardoanalista/react-crud/blob/master/src/style.css#L66 如果有更好的方法，请告诉我。

非常感谢您的帮助！

祝好 Leonardo

- Leonardo

Answer 1

你正在渲染ReactCSSTransitionGroup和组一起，这是不正确的。根据此处，组需要在转换组内部挂载。我明白你想在每一行上进行转换，但为了使其正常工作，它需要在tbody上进行。

你需要做的就是从CourseListRow组件中删除ReactCSSTransitionGroup并将其添加到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>

我在您的仓库中提交了拉取请求，已修复该漏洞。

- Kafo

---

谢谢你，Hussein！我想我尝试过这种方法，但我没有到达thead。 ReactCSSTransitionGroup动画确实令人印象深刻。我手动将您更改的两个文件复制到了新提交中：https://github.com/leonardoanalista/react-crud/commit/1e81d7b8f70f64f173b4c34391d0f38f64258519 - Leonardo

当然可以！您能接受这个答案作为正确的吗？ - Kafo