反应元素宽度动画

Posted 2021-03-28

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

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

我想要做的是在react组件中的一个元素中设置一个样式，即“width：xx％”，并将它从0％设置为xx％。由于渲染时的元素已具有此属性，因此动画无效。我查看了“ReactCSSTransitionGroup”，但没有接近解决方案。我开始乱搞setTimeOut来设置组件渲染后的样式属性，但它感觉非常混乱和“hackish”。有人能指出我正确的方向吗？

答案

如果您在渲染组件后尝试为组件设置动画（从0到n％），可以通过在setState中调用componentDidMount来完成。由于浏览器不会重新渲染在同一动画帧中已更改但合并更改并呈现最终结果的内容，因此您需要将其包装在requestAnimationFrame中

我在这个qazxsw poi中彻底解释了这一点。

代码如下所示：

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> ); } }

希望有所帮助！