在挂载时提供 React 组件动画答案

【问题标题】：Giving React component animation on mount在挂载时提供 React 组件动画
【发布时间】：2018-08-27 10:28:34
【问题描述】：

我试图让这个组件在安装时移入，但得到

Cannot read property 'enter' of undefined

这是一个简化的代码（我已经准备好所有的 CSS 类）：

class Example extends React.Component {
  state = {
    transitionIn: false,
  };

  componentDidMount = () => {
    this.setState({ transitionIn: true })
  }

  render() {
    return (
      <CSSTransition
        in={this.state.transitionIn}
        timeout={1000}
        className={'wordTransition'}
      >
        <div>dksjfnsdkjnfj</div>
      </CSSTransition>
    );
  }
}

https://codesandbox.io/s/rj5046zxoo

【问题讨论】：

标签： reactjs animation transition react-transition-group react-animated

【解决方案1】：

我相信您遇到的错误是您在上面提供的 codesandbox.io 链接中解决的错误。我遇到了同样的问题。 我没有使用更熟悉的className（单数）来命名使用类名作为各种过渡状态前缀classNames（单数）的道具。

重申一下：在 <CSSTransition> 组件中，确保您使用的是 classNames 属性，而不是像在 react 组件的 html 元素中那样使用 className。

我觉得 React Transition Group 在其组件中使用名为 classNames 的道具的选择令人困惑，或许应该重新考虑。

【讨论】：