Question

我正在尝试使用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渲染黑客的情况下解决此问题，请告诉我，否则我会将此问题标记为已回答。

Answer 1

我已经弄清楚了，以防万一其他人出现，看到这个答案是使用data <- tbl(conn, "customers") %>% filter(age >= 18) subset <- data %>% filter(eye_color != "brown") %>% group_by(gender, method, age, region) %>% summarise(sum(purchases)) %>% loaded <- as.data.frame(subset) # do some join here but in memory and not in Redshift # full_join(data, by=c("region", "age", "method"))道具。它允许您在离开孩子时更改道具值。

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

react-transition-group有条件地激活

1 个答案: