Reactjs 如何停止页面加载[React]时发生的css转换

我试图在显示侧导航时进行转换，在打开和关闭时效果良好。问题是当页面第一次加载时，边栏显示为退出。代码如下：

<div>
    <span style={{ cursor: 'pointer' }} onClick={ this.showOrHideNav }>&#9776;</span>
    <Transition in={this.state.navStanje} timeout={ 500 }>
    { state => 
    <div className={`navigacija navigacija-${state}`}>
        <a to="javascript:void(0)" className="backButton" onClick={ this.showOrHideNav }><Typography variant="h7">&times;</Typography></a><br />
        <div style={ profileDiv } >
            <img src={require('../../images/campus.svg')} style={ imageStyle } height='100%'/><br />
            <Typography style={ profileName }>Ime Prezime</Typography>
        </div>
        <div className="fadingLine"></div>
        <Typography variant="h4" style={{ color: '#FFEB3B', marginTop: '3%' }}>Neki naslov</Typography>
        <a to="#" className="linkovi">About</a><br />
        <a to="#" className="linkovi">Services</a><br />
        <a to="#" className="linkovi">Clients</a><br />
        <a to="#" className="linkovi">Contact</a><br />
    </div>
    }
    </Transition>
</div>

---

当页面加载时，如何防止侧边栏退出？

将初始CSS transform属性设置为transform:translateX-100%；这样一来，它将首先隐藏在你的.navigacija上，在你的css中设置transform:translateX-100%；当页面重新加载时，我可以看到边栏消失时的过渡。之后一切正常。

.navigacija {
  position: fixed;
  top: 8%;
  left: 0;
  height: 100%;
  padding-top: 1%;
  background: #2B3944;
  width: 20%;
  display: block;
  overflow-x: hidden;
  z-index: 2;
  transition: all 0.5s linear;
}

.navigacija.navigacija-entering {
  transform: translateX(0%);
}

.navigacija.navigacija-exited {
  transform: translateX(-100%);
}