I am quite new to React. I am trying to learn by implementing a full CRUD. However, I am unable to get animation working well for removing a course from the list.
I have configured animation on transitionAppear
and on transitionLeave
.
The transitionAppear
works alright. I can't get the transitionLeave
This is my ponent: .js
This is the CSS for the animation: .css#L66
Please let me know if there is a better approach.
Any help would be highly appreciated!
cheers Leonardo
I am quite new to React. I am trying to learn by implementing a full CRUD. However, I am unable to get animation working well for removing a course from the list.
I have configured animation on transitionAppear
and on transitionLeave
.
The transitionAppear
works alright. I can't get the transitionLeave
This is my ponent: https://github./leonardoanalista/react-crud/blob/master/src/ponents/course/CourseListRow.js
This is the CSS for the animation: https://github./leonardoanalista/react-crud/blob/master/src/style.css#L66
Please let me know if there is a better approach.
Any help would be highly appreciated!
cheers Leonardo
Share Improve this question edited Dec 22, 2016 at 6:55 Leonardo asked Dec 22, 2016 at 5:18 LeonardoLeonardo 1,0011 gold badge13 silver badges15 bronze badges 01 Answer
Reset to default 4You have ReactCSSTransitionGroup being rendered along with the group which is something you shouldn't be doing per here because the group needs to be mounted inside of the transition group. I understand that you want to do the transition on each row but for this to work it needs to be on a the tbody.
All what you need to do is take out ReactCSSTransitionGroup
from CourseListRow ponent and add it to CourseList:
</thead>
<ReactCSSTransitionGroup
transitionName="course-item"
transitionLeave={true}
transitionAppear={true}
transitionAppearTimeout={2500}
transitionEnterTimeout={1700}
transitionLeaveTimeout={1000}
ponent="tbody"
>
{this.props.courses.map(course =>
<CourseListRow key={course.id} course={course} removeCourse={this.props.removeCourse} />
)}
</ReactCSSTransitionGroup>
</table>
I made a pull request on your repo with the bug fixed.