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