时间戳

首页 > 解决方案 > 在挂载时提供 React 组件动画

reactjs - 在挂载时提供 React 组件动画

问题描述

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

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

标签： reactjsanimationtransitionreact-transition-groupreact-animated

解决方案

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

重申一下：在<CSSTransition>组件内部，请确保您使用的是classNames道具，而不是className像在反应组件的 html 元素中那样使用。

我觉得React 过渡组选择使用在其组件中调用的 propclassNames令人困惑，也许应该重新考虑。

推荐阅读