css - React 更改状态触发转换

Question

我有以下反应组件

export interface IDivBodyVisible {
    isVisible: string;
}

export default class NavDropDownItem extends React.Component<{ItemContent: string}, IDivBodyVisible> {

constructor(props: any) {
    super(props);

    this.state = { 
        isVisible: 'none' 
    }
}


render() {
         return (
            <div className="divBox" >
                <div className="divHeader" onClick={this.SwitchVisibility}>
                    <Icon className="icon"  iconName="ChevronDown"/>
                    {this.props.ItemContent}
                </div>
                {
                    this.state.isVisible !== 'block' ? null :
                <div className="divBody">
                    <ul className="ItemList">
                        <li>
                            <a className="miau" title="item1" onClick={this.ConsoleLog}>Item 1</a>
                        </li>
                        <li>
                            <a title="item2" onClick={this.ConsoleLog}>Item 2</a>
                        </li>
                        <li>
                            <a title="item3" onClick={this.ConsoleLog}>Item 3</a>
                        </li>
                    </ul>
                </div>
                }
            </div>
         )
}


private ConsoleLog = () : void => {
    console.log("Test");
}

private SwitchVisibility = (): void => {
    this.setState({
        isVisible : this.state.isVisible === 'none' ? 'block' : 'none'
    });
 }
}

目前，如果我点击图标，divbody 会立即出现。相反，我希望 divbody 非常平滑。我已经尝试给 .divBox 一个过渡缓出 0.2，但这并没有做任何事情。

有什么建议我可以尝试吗？

标签： cssreactjstransition