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

Question

//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 有办法修复它吗？我对反应很陌生。非常感谢您的帮助。谢谢

Answer 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 毫秒后触发。所以基本上你必须计算你之前转换的持续时间并相应地设置时间。