反应元素宽度动画答案

【问题标题】：React element width animation反应元素宽度动画
【发布时间】：2017-08-24 19:30:30
【问题描述】：

在我基于 React 的应用程序中，我尝试执行简单的 css3 宽度转换，例如：

.foo {
    transition: width 1s ease-in-out;
}

我想要做的是在反应组件的元素内设置一个样式，即“宽度：xx%”，并将其动画从 0% 到 xx%。由于渲染时的元素已经具有此属性，因此动画无法正常工作。我研究了“ReactCSSTransitionGroup”，但没有更接近解决方案。在渲染组件后，我开始使用 setTimeOut 设置样式属性，但感觉真的很混乱和“hackish”。有人能指出我正确的方向吗？

【问题讨论】：

标签： javascript css reactjs animation

【解决方案1】：

如果您尝试在组件渲染后（从 0 到 n%）对其进行动画处理，您可以通过在 componentDidMount 中调用 setState 来实现。由于浏览器不会重新渲染在同一动画帧中发生更改的内容，而是合并更改并渲染最终结果，因此您需要将其包装在 requestAnimationFrame

我在这个blog post中解释得很透彻。

代码将如下所示：

export default class AnimateMe extends Component {
  state = {
    width: 0
  };

  componentDidMount() {
    requestAnimationFrame(() => {
      this.setState({ width: "75%" });
    });
  }

  render() {
    return (
      <div style={{ width: this.state.width }}>
        Animate my width
      </div>
    );
  }
}

我做了一个工作示例： https://codesandbox.io/s/7z1j794oy1

希望有帮助！

【讨论】：

完美运行，使用较新的 React，您可以使用 useEffect 和 useState 来实现相同的结果。谢谢@Stanko