Angularjs 将角度动画添加到引导下拉列表

我想在我的angular应用程序中为下拉列表的打开和关闭添加动画。到目前为止，我可以在下拉列表中获得打开的动画，但是对于关闭的动画没有

我直接从bootstrap示例中获取导航条形码，并对其进行了一些小的修改，将其添加到我的页面中。导航栏的相关部分如下所示：

<ul class="nav navbar-nav navbar-right">
  <li ng-if="isAuthenticated()" class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ authenticatedUser.displayName }} <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
      <li ng-if="menuItem.show()" ng-repeat="menuItem in menuItems" ng-class="{active: menuItem.active, disabled: menuItem.disabled}">
        <a ui-sref="{{ menuItem.state }}({{ menuItem.stateParams }})">{{ menuItem.heading }}</a>
      </li>
    </ul>
  </li>
</ul>

看起来和我看到的非常相似，而且看起来和我想要的非常接近。但我真的不明白如何应用它来在下拉菜单上获得动画

作为旁注，但可能相关的是我想使用/正在使用该软件包作为css动画的基础。
刚刚面对同样的问题，花了数周时间尝试制作双向淡入动画，我想出了一个棘手的css解决方案。差不多完成了，我在Angular UI Modal中查看了淡入淡出动画，我发现：

<div class="modal fade in" ng-class="{in: animate}">modal content</div>

希望它能帮你节省时间

<ul class="dropdown-menu my-cool-opening-animation" role="menu">

<div class="modal fade in" ng-class="{in: animate}">modal content</div>

.dropdown.ng-animate-start {
  border-spacing: 0;
}

.open-add > .dropdown-menu,
.open-remove > .dropdown-menu {
  display: block !important;
}

.open-add > .dropdown-menu {
  opacity: 0;

  -webkit-transition: opacity .3s ease-in;
  -moz-transition: opacity .3s ease-in;
  -ms-transition: opacity .3s ease-in;
  -o-transition: opacity .3s ease-in;
  transition: opacity .3s ease-in;
}

.open-add.open-add-active > .dropdown-menu {
  opacity: 1;
}

.open-remove > .dropdown-menu {
  opacity: 1;

  -webkit-transition: opacity .3s ease-out;
  -moz-transition: opacity .3s ease-out;
  -ms-transition: opacity .3s ease-out;
  -o-transition: opacity .3s ease-out;
  transition: opacity .3s ease-out;
}

.open-remove.open-remove-active > .dropdown-menu {
  opacity: 0;
}