reactjs - 反应过渡组有条件地动画出来
问题描述
我正在尝试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
渲染黑客的情况下解决此问题,请告诉我,否则我只会将此问题标记为已回答。
解决方案
我已经想通了,以防万一其他人出现并看到这个答案是使用childFactory
道具。它允许您在离开孩子时更改道具值。
推荐阅读
- reactjs - 如何获取redux action中包含的数据
- javascript - 在带有参数的 Javascript 函数中执行 C# Lambda 表达式
- apache-spark - 如何在 Spark 代码中用 Java8 编写 mapFunction?错误:map(Function1, Encoder) 不适用于参数
- twig - Twig:从数组中取消设置元素
- python - Python:从 genanki 新制作的 anki 甲板笔记是不可见的
- javascript - 如何为存储在实时数据库中的所有数据设置特定规则
- java - 无法理解问题出在哪里(Java)
- c# - 如果使用 Android App Bundle Xamarin 编译,Android 应用程序会导致某些设备崩溃
- delphi - 删除已发布的空白部分总是安全的吗?
- bash - 如何创建名称包含变量的数组?