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

Question

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

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

这是我的基本设置：

<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，如我所料，但它仍然没有动画。

有什么建议吗？

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

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

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

Answer 1

我已经弄清楚了，以防万一其他人看到这个答案是使用 childFactory 道具。它允许您在离开 children.

时更改道具值

Link 更多信息：https://medium.com/lalilo/dynamic-transitions-with-react-router-and-react-transition-group-69ab795815c9

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

react-transition-group conditionally animate out

reactjs

react-transition-group