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

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

Answer 2

因为antd组件具有其默认样式：transition:"all 0.3s"。 Devtool 中的样式

如果你用样式隐藏它，我建议使用dispaly:block/none，而不是visibility。