Question

我有一个动画，可以在任何新项目上运行到网格。让我们说这个动画需要5秒钟才能运行。目前，如果我尝试在5秒内删除该元素（因此在输入动画仍在运行时），该项目将保留在列表中，直到输入动画结束。

查看docs，它表示这是设计的：

当您尝试删除项目时，您会注意到 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;
}

更新源代码参考：

设置状态 - https://github.com/avanderhoorn/Glimpse.Client.Prototype/blob/master/src/request/components/request-summary-view.jsx#L33
过渡组和设置键的使用 - https://github.com/avanderhoorn/Glimpse.Client.Prototype/blob/master/src/request/components/request-summary-list-view.jsx

在输入动画时，删除元素仍在运行

0 个答案: