最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - React animation when removing an element - Stack Overflow

programmeradmin0浏览0评论

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 0
Add a ment  | 

1 Answer 1

Reset to default 4

You 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.

发布评论

评论列表(0)

  1. 暂无评论