对于切换菜单的过渡效果并没有反映出来

Question

我有一个切换菜单，切换有效，但转换没有反映，尽管m指定了转换，但我不明白m缺少什么，这没有产生转换效果这是我的css包装，我没有使用bootstrap 4 应用任何样式m

.hideM{
display: none;   
}
.showM{
display: flex;
height: 100%;
border: 1px solid;
width: 25%;
position: fixed;
left:0px;    
background: #ffb800;
margin: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;        
}

这是我的切换反应代码

<div className="wrapper">                                   
<nav className="nav navbar-dark bg-dark">                                                  
<button onClick={this.toggleMenu} className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle_navigation">
<span className="navbar-toggler-icon"></span>
</button>                                                    
</nav> 
<div  className={this.state.tsidebar?'showM':'hideM'} >
Open
</div> 
</div>

非常感谢您的帮助

Answer 1

首先，所有的beigner转换都不与显示一起使用，所以永远不要使用带有转换的显示样式

.hideM{
width: 250px;
height: 100%;
margin-left: -250px;
position: fixed; 
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;   
}
.showM{      
width: 250px;
height: 100%;
border: 1px solid;   
position: fixed;    
background: #ffb800;    
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;             
}