反应过渡组有条件地动画出来答案

【问题标题】：react-transition-group conditionally animate out反应过渡组有条件地动画出来
【发布时间】：2018-05-15 01:22:46
【问题描述】：

我正在尝试使用 react-transition-group 将一些动画添加到我拥有的列表中。

这是我的一般设置，我有一个列表组件，它呈现了许多孩子。有许多交互会导致从该列表中添加/删除项目。其中一些操作需要使用动画来删除组件，但我似乎无法让它工作，我猜我可能在这里遗漏了一些东西。

这是我的基本设置：

<TransitionGroup className="list" component="ul">
   {this.props.item.map(item => (
      <CSSTransition key={item.id} timeout={500} classNames="fade" enter={false} exit={!!item.shouldAnimate}>
        <ChildComponent/>
      </CSSTransition>
    ))}
</TransitionGroup>

我已验证我的状态逻辑中的一切正常（即 shouldAnimate 设置为 true，正如我所料，但它仍然没有动画。

有什么建议吗？

编辑：创建了一个显示问题的小提琴，我想我现在看到了这个问题。 http://jsfiddle.net/af0ee2eo/2/

正如我上面所描述的，直到用户采取行动时，我才知道该行动是否应该导致项目在从列表中删除时产生动画效果。我正确设置了shouldAnimate，但是在下一次渲染之前，我从列表中删除了该项目。如果我将删除延迟到下一次渲染之后一切正常，但每次都必须这样做很烦人（这就是我通过小提琴底部的“使用延迟？”复选框演示的内容）。我希望有一种方法可以将状态注入到由 TransitionGroup 的组件状态持有的项目的状态中。

如果有人知道如何在没有setTimeout 或requestAnimationFrame 渲染黑客的情况下解决此问题，请告诉我，否则我只会将此问题标记为已回答。

【问题讨论】：

尝试至少给出地图函数的完整代码。 map 函数似乎没有关闭，如果这是您的实际代码，它应该会给您语法错误
感谢您指出这一点。我修复了语法错误，但完整的代码可能比任何东西都更麻烦。这里缺少的只是关闭地图功能。
那我应该添加它作为答案，以便每个人都知道它已关闭？
哦，对不起，我不是这个意思。我是说这只是发布的代码 sn-p 的问题。这个问题依然存在。
在上面添加了一个小提琴，我想我看到了这个问题（之前应该更明显），但仍然希望有一个解决方法。

标签： reactjs react-transition-group

【解决方案1】：

我已经想通了，以防万一其他人出现并看到这个答案是使用childFactory 道具。它允许您在离开孩子时更改道具值。

【讨论】：