如何在react中设置关闭自定义侧边栏的动画

我正在尝试在react中创建一个自定义侧栏组件。虽然我可以为其打开设置动画,但无法为其关闭设置动画。我确实理解为什么它在关闭时没有动画,但我无法找到修复它的方法。我还希望边栏在折叠时从dom中移除。

头球。js

constructor(props) {
    super(props);
    this.state = {
        showSidePanel: false,
        isSignUp: false,
        isLogIn: false,
    }
}
.
.
.
closePanel = () => {
    this.setState({
        showSidePanel: false,
        isSignUp: false,
        isLogIn: false,
    })
};
.
.
.
<Button
    text="Log in"
    onClick={ () =>
        this.setState({
            showSidePanel: true,
            isLogIn: true,
        })
   }
/>

<SidePanel open={ this.state.showSidePanel } onClose={ this.closePanel } />

侧面板。js

class SidePanel extends Component {
    render() {
        const { open, onClose } = this.props;
        let slideDirection = open ? "slideInRight" : "slideOutRight";

        return (
            open ? (
                <div className="pageOverlay right" onClick={ onClose }>
                    <div className={`panelWrapper animated faster ${ slideDirection }`}>
                        <p onClick={ onClose }>Close Panel</p>
                    </div>
                </div>
            ) : null
        )
    }
}

export default SidePanel;