我是 React 的新手。我正在尝试通过实现完整的 CRUD 来学习。但是,我无法让动画很好地从列表中删除类(class)。
我已经在 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
如果有更好的方法,请告诉我。
非常感谢任何帮助!
干杯 莱昂纳多
最佳答案
根据 here,您有 ReactCSSTransitionGroup 与组一起呈现,这是您不应该做的事情因为该组需要安装在过渡组内部。我知道您想在每一行上进行转换,但要使其正常工作,它需要在 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>
我在修复了错误的情况下对您的存储库发出了拉取请求。
关于javascript - 移除元素时 react 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41276229/