Компоненты antd скрыты позже, чем родительский div

Question

У меня есть поле, которое делает себя видимым при нажатии кнопки.Поле имеет текстовое поле и кнопку.Когда эта кнопка нажата, окно должно снова скрыться.Но моя проблема в том, что окно сначала скрывается, и на долю секунды я все еще вижу компоненты antd.

box = () => {
  <div style={{visibility: this.state.visibility}}>
    <Input type= 'text' />
    <Button onClick={() => {this.hideBox()}}>Send</Button>
  </div>
}
showBox = () => {
  this.setState({visibility: 'visible'});
}
hideBox = () => {
  this.setState({visibility: 'hidden'});
}
render(){
  return(
    <div>
      <Button onClick={() => {this.showBox()}}>Show</Button>
      {this.box()}
    </div>
  )
}

Я не знаю, как заставить их одновременно скрываться.Спасибо за помощь.

Answer 1

потому что компоненты antd имеют свой стиль по умолчанию: transition:"all 0.3s". стили в devtool

если вы скрываете это со стилем, я предлагаю использовать dispaly:block/none вместо visibility.

Answer 2

style={{display: `${this.state.visibility ? 'block' : 'none'}`}}