移除元素時的反應動畫

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

移除元素時的反應動畫

回答

相關問題