如何在数组上渲染顺序动画

Question

我正在尝试通过使每个单词随动画顺序输入来渲染短语。我使用了它，它解决了问题，但我认为是副作用，而不是故意的。

class Delay extends Component {
  static propTypes = {
    children: PropTypes.node,
    wait: PropTypes.number
  }

  static defaultProps = { wait: 250 }

  state = { waiting: true }

  componentDidMount () {
    this.timer = window.setTimeout(() => {
      this.setState({
        waiting: false
      })
    }, this.props.wait)
  }

  componentWillUnmount () {
    clearTimeout(this.timer)
  }

  render () {
    return (!this.state.waiting) ? this.props.children : null
  }
}

并包装一个过渡：

['aaa','bbb','ccc'].map((word, key) =>
  <Delay wait={250}>
    <CSSTransition
      in={this.state.transitionIn}
      appear={true}
      timeout={transitionDuration}
      classNames={{
        appear: classes.wordTransitionAppear,
        appearActive: classes.wordTransitionAppearActive
      }}
    >
      {word}
    </CSSTransition>
  </Delay>
)

以下是实时版本：https://ilyothehorrid-twitter.herokuapp.com

有一点延迟，但我不知道它来自哪里（持续时间为100或10000没有区别）