如何使用CSSTransition延迟渲染数组中的每个项目？

Question

我有一组项目，当这些项目出现在DOM上时，我想延迟渲染每个项目。目前，所有项目均同时渲染。这是我的代码：

  <TransitionGroup className="portfolioItems" component={Container}>
    {portfolio &&
      portfolioItems.map(({ id, url }) => (
        <CSSTransition classNames="portfolioItems" timeout={5000} key={id}>
          <Segment rised style={{ padding: 0, margin: 25 }}>
            <Image src={url} rounded />
          </Segment>
        </CSSTransition>
      ))}
  </TransitionGroup>

有没有办法做到这一点？这是我当前的CSS：

.portfolioItems-enter {
  opacity: 0;
  transform: translateY(50%) scale(0.7, 0.7);
}
.portfolioItems-enter-active {
  opacity: 1;
  transform: translateY(0%) scale(1, 1);
  transition: 3s all ease-in-out
}