Question

我有一个切换菜单，切换有效，但是过渡并没有反映出来，尽管我指定了过渡，但我不明白缺少的是什么m，这没有过渡效果，这是我的css包装器，我没有使用任何样式m引导程序4

.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

首先，对于所有的广告人来说，转换永远不会与显示一起使用 因此从不使用带有过渡效果的显示样式

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

对于切换菜单过渡效果没有反映

1 个答案: