0

我有一个动画，可以在网格的任何新项目上运行。假设这个动画需要 5 秒才能运行。目前，如果我尝试在 5 秒内删除该元素（因此当进入动画仍在运行时），该项目将保留在列表中，直到进入动画完成。

查看文档，它说这是设计使然：

您会注意到，当您尝试删除一个项目时，ReactCSSTransitionGroup 会将其保留在 DOM 中。如果您使用带有附加组件的未缩小版本的 React，您会看到一条警告，表明 React 期望发生动画或过渡。这是因为 ReactCSSTransitionGroup 将 DOM 元素保留在页面上，直到动画完成。

您需要添加以下内容（显然更新为相关的类名），它应该适用于上述情况：

.example-leave {
  opacity: 1;
  transition: opacity .5s ease-in;
}

.example-leave.example-leave-active {
  opacity: 0.01;
}

我发现不是这种情况，即使我有描述的leave类，我发现它仍在等待原始输入动画完成，这种行为是否正确，我该如何解决？

这是一个视频，显示了有问题的怪癖 - https://www.youtube.com/watch?v=3oKerWlLZIE

如果它有所作为，这里是我的课程：

.request-summary-item-holder-enter {
    background-color: #F8F5EC;
    transition: background-color 5s ease-in;
}
.request-summary-item-holder-enter.request-summary-item-holder-enter-active {
    background-color: transparent;
}

.request-summary-item-holder-leave {
    opacity: 1;
    transition: opacity 0.05s ease-in;
}
.request-summary-item-holder-leave.request-summary-item-holder-leave-active {
    opacity: 0.01;
}

更新： 源代码参考：

4

0 回答 0