如何在React中为自定义侧边栏的关闭添加动画效果

Question

我试图在react中创建一个自定义的侧边栏组件。虽然我可以为它的开口设置动画，但是不能为它的关闭设置动画。我确实了解关闭时没有动画的原因，但是我无法找到解决它的方法。我也希望折叠时可以将侧边栏从dom中移除。

Header.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 } />

SidePanel.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;