移除元素时的反应动画

我对React非常陌生。我试图通过实施完整的CRUD来学习。但是，我无法使动画效果良好，从列表中删除课程。移除元素时的反应动画

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

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

任何帮助将不胜感激！

欢呼莱昂纳多

来源

2016-12-22 Leonardo

你ReactCSSTransitionGroup正在与这些你不应该每here因为集团需要安装过渡小组的内部从事群体一起呈现。我知道你想要在每一行进行转换，但为了这个起作用，它需要放在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>

我做了固定的bug您的回购拉请求。

来源

2016-12-22 07:08:18 Kafo

谢谢侯赛因！我试过这种方法，但我没有去'thead'。 'ReactCSSTransitionGroup'动画令人印象深刻。我将手动更改的2个文件复制到新的提交中：https：//github.com/leonardoanalista/react-crud/commit/1e81d7b8f70f64f173b4c34391d0f38f64258519 – Leonardo

当然！你能接受答案是否正确？ – Kafo

移除元素时的反应动画

回答

相关问题