在我基于 React 的应用程序中,我尝试执行一个简单的 css3 宽度转换,例如:
.foo {
transition: width 1s ease-in-out;
}
我想做的是在 react 组件中的一个元素内设置一个样式,它是“宽度:xx%”,并将它从 0% 动画化到 xx%。由于渲染时的元素已经具有此属性,因此动画无法正常工作。我研究了“ReactCSSTransitionGroup”,但没有接近解决方案。在呈现组件后,我开始摆弄 setTimeOut 来设置样式属性,但感觉真的很乱而且“hackish”。有人能指出我正确的方向吗?
最佳答案
如果您试图在组件呈现后(从 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
希望对您有所帮助!
关于javascript - react 元素宽度动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43125220/