Reactjs 使用react分两步添加css？

进行css转换时的一种常见情况是，首先需要设置一些初始值，然后转换为其他值。在我的例子中，我需要将一个框更改为绝对位置，然后我想将其转换为全屏。这就是我所尝试的：

组件安装（道具）{
this.flky=新的Flickity（'.carousel'，flickityOptions）
this.flky.on（'staticClick'，（）=>{
this.setState（{zoom:'transition'}，（）=>{
this.setState（{zoom:'full'}）
})
})
}
设置样式（）{
const container=this.refs.container
if（this.state.zoom==='transition'）{
返回{
位置：'绝对'，
顶部：container.offsetTop+'px'，
左：container.offsetLeft+'px'，
宽度：container.offsetWidth+'px'，
高度：container.offsetHeight+'px'，
过渡：'all.5s'
}
}else if（this.state.zoom=='full'）{
返回{
背景：“白色”，
位置：'绝对'，
排名：0，
左:0,，
宽度：“100%”，
高度：“100%”，
过渡：'all.5s'
}
}
}

问题似乎是在应用辅助css之前没有应用初始css，因此div直接进入全屏。我试图使用

setState

回调来实现这一点，但它不起作用

出于某种原因，这会导致0毫秒的延迟

this.flky.on（'staticClick'，（）=>{
this.setState（{zoom:'transition'}，（）=>{
设置超时（（）=>{
this.setState（{zoom:'full'}，（）=>{
this.flky.resize（）
}, 0)
})
})
})

一旦设置了状态，就用另一个状态覆盖它。不要在setState的回调中设置css，而是希望在第一次设置完成后立即设置css

---

如果我是你，我会用react库制作动画。React Motion有一个

onRest

回调，您可以使用它来执行此操作。

一旦设置了状态，您就可以用另一个状态覆盖它。不要在setState的回调中设置css，而是希望在第一次设置完成后立即设置css

---

如果我是你，我会用react库制作动画。React Motion有一个

onRest

回调，您可以使用它。

如果我出于某种原因在0秒上添加延迟，它会起作用，但这通常不是一个好的做法，是否有一些回调我可以使用或什么？应用初始css。您的问题是，您需要在第一个和第二个

setState

之间有0.5秒的延迟（但速度更快）。我认为这种方式总的来说有缺点。也许你会发现在css中使用

关键帧

更有用-只通过css进行所有转换。谢谢，不过，css不是这样工作的。转换从应用新css时开始，因此不能在这种意义上覆盖它。我以0毫秒的延迟更新了这个问题。但它是owerwrites！））不是因为css，而是因为react在使用新状态重新渲染孔元素时会覆盖该孔元素。我相信如果设定较长的持续时间，你会染上的。i、 e.10秒用于转换，5秒用于设置超时-检查您将看到什么？它可以用0秒工作，我不需要任何时间。如果出于某种原因我在0秒上添加延迟，它可以工作，但这通常不是一个好的做法，是否有我可以使用的回调或其他方法？应用初始css。您的问题是，您需要在第一个和第二个

setState

之间有0.5秒的延迟（但速度更快）。我认为这种方式总的来说有缺点。也许你会发现在css中使用

关键帧

更有用-只通过css进行所有转换。谢谢，不过，css不是这样工作的。转换从应用新css时开始，因此不能在这种意义上覆盖它。我以0毫秒的延迟更新了这个问题。但它是owerwrites！））不是因为css，而是因为react在使用新状态重新渲染孔元素时会覆盖该孔元素。我相信如果设定较长的持续时间，你会染上的。i、 e.转换时间为10秒，设置超时时间为5秒-检查您将看到什么？它可以在0秒内工作，我不需要任何时间。我是否可以在覆盖它之前强制渲染？虽然转换仍然不会完成并被覆盖。5s比

setState

长得多。根据css规范，如果对象具有css属性，然后获得新的css属性，则会发生转换，我会将问题更新为calrify。我是否可以在覆盖它之前强制渲染？转换仍然不会完成并被覆盖。5s比

setState

长得多。根据css规范，如果对象具有css属性，然后在发生转换时获得新的css属性，我会将问题更新为calrify。