7

我对 React 很陌生。我正在尝试通过实施完整的 CRUD 来学习。但是，我无法让动画很好地从列表中删除课程。

我已经配置了动画 ontransitionAppear和 on 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

请让我知道是否有更好的方法。

任何帮助将不胜感激！

欢呼莱昂纳多

4

1 回答 1

4

你有 ReactCSSTransitionGroup 与组一起呈现，这是你不应该在这里做的事情，因为组需要安装在过渡组内。我知道您想在每一行上进行过渡，但要使其正常工作，它需要在 tbody 上。

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

我在您的回购中提出了一个拉取请求，并修复了错误。

于 2016-12-22T07:08:18.233 回答