如何在 React JS 中的 css 转换结束后使用 setState？

Posted 2023-03-06

【中文标题】如何在 React JS 中的 css 转换结束后使用 setState？

【英文标题】：How to use setState after a css transition ends in React JS?

【发布时间】：2021-10-16 15:50:10

【问题描述】：

//sample piece of codes

constructor() 
    super()
  this.state.opacity= '0'
  this.state.mover = 'translateY(-40%)'
 


this.setState(opacity:'1')
this.setState(mover: 'translateY(-900%)', () => this.setState(opacity:'0'))

当我点击一个按钮时，我希望一个 div 出现（使用不透明度 1）并过渡到顶部并在到达顶部后淡出（使用不透明度 0）。

但它并没有像我预期的那样工作。目前，它会立即淡出。它不会等待过渡结束。我希望它在过渡结束后淡出。

React 有没有办法修复它？我对反应很陌生。非常感谢您的帮助。谢谢。

【问题讨论】：

我认为解决这个问题的唯一方法是使用“react-transition-group”。我必须做一个 POC 来确认。 reactcommunity.org/react-transition-group

【参考方案1】：

找到了一个简单的解决方法。我不确定这是否是正确的方法，但它确实有效。

constructor() 
super()
this.state.opacity= '0'
this.state.mover = 'translateY(-40%)'



this.setState(opacity:'1')
this.setState(mover: 'translateY(-900%)', () => 
               setTimeout(() =>  this.setState( opacity: '0' ), 1000);
               )

在回调函数中，我设置了一个 settimeout 函数。 settimeout 函数内部的事件将在 xxx 毫秒后触发。所以基本上你必须计算你之前转换的持续时间并相应地设置时间。

【讨论】：

这绝对不是正确的方法......一般来说，您不应该像这样对 setTimeouts 进行硬编码。在这种情况下这并不是什么大问题，但我也会考虑使用 CSS 动画。