для переключения меню переходы эффекта не отражают - PullRequest
Новая
       11

для переключения меню переходы эффекта не отражают

0 голосов
/ 06 ноября 2018

У меня есть меню переключения, переключение работает, но затем переход не отражает, хотя я задаю переход, я не понимаю, что это за отсутствующий элемент, который не дает эффекта перехода, это моя оболочка CSS, я не применял никаких стилей, используя начальная загрузка 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>

любая помощь приветствуется

1 Ответ

0 голосов
/ 06 ноября 2018

Во-первых, все переходы не работают с дисплеем поэтому никогда не используйте стили отображения с переходами 

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