Question

我觉得这是一个非常简单的情况，我想显示项目列表，但偶尔也有一些正在加载的微调器。（假设某人正在一次保存一些项目。）

我意识到我可以使用官方的React animation addons来添加一些很酷的淡入淡出效果，以供最初加载或删除这些项目时使用。

我继续进行以下操作：

<ReactCSSTransitionGroup
  transitionName="fade"
  transitionAppear={true}
  transitionAppearTimeout={500}
  transitionEnterTimeout={500}
  transitionLeaveTimeout={300}>

  {props.todos.map(todo => (
    <Todo key={todo.id} todo={todo} />
  ))}

  {props.loadingSpinners.map(ls => (
    // Somehow exclude fade effects for these?
    <LoadingSpinner key={'loading-spinner-' + ls.id} />
  ))}

</ReactCSSTransitionGroup>

最初，我认为加载微调器项目消失很酷，但是，我很快发现它引起了一些布局问题。（即，一旦加载完成，在很短的一段时间内，加载微调器将逐渐消失，新保存的ToDo将逐渐消失。此外，当加载过程的完成速度比动画所需的完成速度快时，它会变得很奇怪。）

无论如何，似乎简单的解决方案只是将某些子项从ReactCSSTransitionGroup组件的规则中“排除”。有人知道这是否可能吗？

是否可以从ReactCSSTransitionGroup中排除某些元素？

0 个答案: