使用ng-show和bootstrap的CSS3转换

我正在开发一个使用angular的javascript应用程序，并且我使用Bootstrap 3的流体布局，我遇到了ng-show指令所使用的css3转换的问题，我要解释我的问题，我有一个jsfiddle看到我的代码：jsfiddle 使用ng-show和bootstrap的CSS3转换

我在“选项”上使用ng-mouseover指令，然后角度显示一个子菜单，我把正确的CSS转换在这种情况下opactity），我用这个子菜单上的ng-mouseleave来隐藏。

问题出在我把子菜单放在.container（对于使用引导的网格布局）时，如果你能看到，动画是异常的。如果我从.container div中取出子菜单，则动画是正确的。我不知道为什么我在Bootstrap的网格布局中遇到这个问题，如果任何人都可以给我点亮的话。

<nav class="navbar navbar-inverse navbar-static-top submenu" ng-show="isSubmenu" 
     data-ng-mouseleave="toggleSubmenu(false)" role="navigation"> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-md-6"></div> 
      <div class="col-md-6 col-xs-12"> 
      <ul class="categories"> 
       <li data-ng-repeat="category in categories">{{category}}</li> 
      </ul> 
      </div> 
     </div> 
     </div> 
    </nav>

来源

2013-12-13 Kalamarico

使用ng-class而不是ng-show。

CSS：

.fadeIn { transition: 1s ease-in-out opacity; opacity: 1; overflow: hidden; height: auto } 
.fadeIn.hidden { opacity: 0; height: 0; overflow: hidden }

HTML

<div class="fadeIn" ng-class="{ hidden: !subMenu }">faded in!</div>

来源

2013-12-13 11:01:35

使用ng-show和bootstrap的CSS3转换

回答

相关问题