Question

我正在实现一个bootstrap主题，其中包含我不想使用的jQuery内部日志，因为我们使用的是angular。关于添加新标签（不能包围我的ul w / div），我对标记的灵活性很小，因为我不想改变的CSS通过“x＆gt; .sub引用.sub-menu -menu＆gt; y“（这对我很糟糕）

我想为此处显示的.sub菜单的隐藏/显示设置动画：

<ul>
    <li ng-repeat="menu in menuItems" ng-class="{open: menu.isOpen}">
        <a ng-click="menu.isOpen=!menu.isOpen" ng-bind="menu.title"></a>
        <ul class="sub-menu" ng-show="menu.isOpen">
            <li ng-repeat="subMenu in menu.subMenuItems">
                <a ng-href="{{subMenu.url}}" ng-bind="subMenu.title"></a>
            </li>
        </ul>
    </li>
</ul>

我创建了一个fiddle来帮助说明它适用于不透明度，但不是高度

Answer 1

您可以使用ngAnimate 模块（而非指令）以及您已有的ng-show指令。

您需要做的是：

添加对angular-animate.js文件的引用。
在模块定义中添加对ngAnimate的引用：
```
angular.module('yourModule', ['ngAnimate']);
```
然后将自定义类（或使用现有的sub-menu类）添加到您的您使用ul显示ng-show，然后您必须设置一些CSS 动画：

.sub-menu {
  -webkit-transform: all linear 500ms;
  transform: all linear 500ms;
  opacity: 1;
  display: block;
}

/* required or animations will fail */
.sub-menu.ng-hide-add,
.sub-menu.ng-hide-remove {
  display: block !important;
}

.sub-menu.ng-hide {
  opacity: 0;
}

这是一个人为的例子：http://plnkr.co/edit/4eRInJzMqccDpxChYHaT?p=preview

AngularJS ul的动画高度

1 个答案: