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

如果有更好的方法，请告诉我。

任何帮助都将受到高度赞赏！

欢呼声莱昂纳多

Answer 1

您有ReactCSSTransitionGroup与组一起呈现，这是您不应该按here进行的操作，因为该组需要安装在转换组内。我知道你想在每一行上进行转换，但为了实现这一点，它需要在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>

我在你的回购邮件上发出拉动请求并修复了错误。

删除元素时反应动画

1 个答案: