javascript - 移除元素时 react 动画

Question

我是 React 的新手。我正在尝试通过实现完整的 CRUD 来学习。但是，我无法让动画很好地从列表中删除类(class)。

我已经在 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

根据 here，您有 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>

我在修复了错误的情况下对您的存储库发出了拉取请求。