反应元素宽度动画
Posted
技术标签:
【中文标题】反应元素宽度动画【英文标题】: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”。有人能指出我正确的方向吗?
【问题讨论】:
【参考方案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以上是关于反应元素宽度动画的主要内容,如果未能解决你的问题,请参考以下文章
在 CSS3 或 jQuery 中将元素的宽度从 0% 设置为 100% 动画,它和它的包装器只需要它们需要的宽度,没有预先设置的宽度