Question

我在显示侧面导航时尝试进行过渡，并且在打开和关闭时效果很好。问题是页面第一次加载时，边栏显示为撤回。这是代码：

<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：

.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%);
}

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

Answer 1

将初始CSS转换属性设置为transform: translateX(-100%);，这样一来，它将首先被隐藏

如何停止页面加载时发生的CSS转换[反应]

1 个答案: