Javascript 等待浏览器在React中渲染元素

我使用CSS

transition

和

top

和

left

来设置React中元素移动的动画

为此，必须首先使用

top:0渲染组件；左：0

，然后使用更改的

顶部

和

左

属性重新渲染以开始转换

这是我的组件：

导出默认类Animator扩展React.Component{
render（）{
var-top=0；
左向量=0；
if（this.state.moving）{
top=this.props.top；
左=this.props.left；
}
返回(
);
}
componentDidMount（）{
this.setState（{moving:true}）；
}
}

.animator{
位置：绝对位置；
过渡：顶部0.5s，左侧0.5s；
}
.红盒子{
宽度：50px；
高度：50px；
背景色：红色；
}

我希望在触发

componentDidMount

之前，浏览器会呈现组件，但我发现情况并非如此

因此，

顶部

和

左侧

属性更新得太快，组件会立即显示在其目标位置，而不会发生转换

将componentDidMount函数更改为延迟可以解决问题，但延迟太短会导致功能不可靠（尤其是在速度较慢的设备上），我不希望延迟更长，因为我希望元素一出现在屏幕上就移动

componentDidMount（）{
设置超时（（）=>{
this.setState（{moving:true}）；
}, 150);
}

---

有没有办法确保我只在浏览器渲染元素后更新状态？

浏览器优化渲染，并且不会重新渲染在同一动画帧中更改的内容。它们合并更改并呈现最终结果。为了缓解这种情况，您可以使用

requestAnimationFrame

技巧：

componenetDidMount（）{
self.requestAnimationFrame（（）=>this.setState（{moving:true}）
}

---

请记住，虽然

requestAnimationFrame

是浏览器中的一种，但一些非常旧的浏览器可能需要一个polifill或前缀才能正常工作。

使用您的示例并没有解决React中的问题，但我发现，如果我添加了额外的requestAnimationFrame调用，那么问题就得到了可靠的解决。我在componentDidMount中的最终代码是：

requestAnimationFrame（（）=>requestAnimationFrame（（）=>this.setState（{moving:true}））；

。非常感谢您的帮助！