当我切换过渡工作正常。但是,当我切换过渡并不起作用。如果我删除溢出:隐藏在main-sidenav-off类中,它的转换有效但文本/锚点不会隐藏。
我的问题是否有任何解决方法?
以下是文件:
HTML
<div class="navbar navbar-inverse navbar-fixed-top shadow-border" ng-cloak ng-show="showHead">
<div class="navbar-header" style="padding-left:5px;">
<button id="menuBtn" type="button" class="navbar-toggle custom-navbar collapsed" ng-click="collapse = !collapse" style="float:left;background-color:#222;">
<span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true" style="color:#fff;font-size:20px;"></span>
</button>
<button type="button" class="navbar-toggle collapsed" data-toggle="toggle" data-target="#navbar" aria-expanded="false" aria-controls="navbar" style="background-color:#222;">
<span class="glyphicon glyphicon-cog" aria-hidden="true" style="color:#fff;font-size:20px;"></span>
</button>
</div>
</div>
<div class="col-sm-2 no-padding">
<div id="sidebarMenu" ng-class="toggle ? 'main-sidenav-on' : 'main-sidenav-off'">
<div class="sidebarBtn" ng-cloak ng-show="alink"><a href="sales">A Link</a>
</div>
<div class="sidebarBtn" ng-cloak ng-show="blink"><a href="">B Link</a>
</div>
</div>
</div>
&#13;
CSS
@media(max-width:767px) {
.main-sidenav-on {
position: absolute;
top: 120px;
height: 100%;
width: 40%;
left: 0;
z-index: 1;
margin: auto;
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
-o-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
bottom: 0;
}
.main-sidenav-off {
position: absolute;
top: 120px;
height: 100%;
width: 0px;
left: 0;
z-index: 1;
margin: auto;
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
-o-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
bottom: 0;
overflow:hidden;
}
}
&#13;