Question

我正在使用角度开发一个javascript应用程序，对于流畅的布局我正在使用Bootstrap 3，我遇到了ng-show指令使用的css3过渡问题，我将解释我的问题，我有一个jsfiddle来查看我的代码：jsfiddle

我在“选项”上使用了ng-mouseover指令，然后angular显示了一个子菜单，我为转换设置了正确的css（在这种情况下是不可行的），我在该子菜单上使用了ng-mouseleave来隐藏。

当我将子菜单放入.container（使用bootstrap进行网格布局）时，问题就出现了，如果你看，动画是不正常的。如果我从.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>

Answer 1

使用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>

使用ng-show和bootstrap进行CSS3转换

1 个答案: