要素を削除するときに反応するアニメーション

Question

私はReactにかなり新しいです。私は完全なCRUDを実装して学びたいと思っています。しかし、リストからコースを削除するにはアニメーションをうまく動かすことができません。

transitionAppearとtransitionLeaveでアニメーションを設定しました。 transitionAppearは問題なく動作します。 https://github.com/leonardoanalista/react-crud/blob/master/src/style.css#L66

がより良いアプローチがあれば私に教えてください： https://github.com/leonardoanalista/react-crud/blob/master/src/components/course/CourseListRow.js

これは、アニメーションのためのCSSは次のとおりです。私はこれが私のコンポーネントであるtransitionLeave

取得することはできません。

ご協力いただければ幸いです。

歓声あなたはグループが遷移グループの内部に実装する必要がありますので、あなたがhereごとにやってはならないものですグループでReactCSSTransitionGroup一緒にレンダリングされている レオナルド

Answer 1

。私はあなたが各列の移行をしたいと思っていますが、これがうまくいくためには、それは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> 

私は固定バグであなたのレポにプルリクエストを行いました。