切换时，ng-class转换无法正常工作

Question

当我切换过渡工作正常。但是，当我切换过渡并不起作用。如果我删除溢出：隐藏在main-sidenav-off类中，它的转换有效但文本/锚点不会隐藏。

我的问题是否有任何解决方法？

以下是文件：

HTML

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

CSS

＆＃13;

＆＃13;

@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;

＆＃13;

＆＃13;