Question

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

我直接从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>

我也使用角度引导，所以行：

<li ng-if="isAuthenticated()" class="dropdown">

触发角度自己的Dropdown指令。

我注意到只需在内部＆lt; ul class =＆＃34;下拉菜单＆＃34;中添加一个类。 ...＆GT;我可以得到一个很好的开放动画。

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

2个问题：

这是正确的＆＃39;棱角分明的＆＃39;添加动画的方法？
动画在下拉列表打开时有效，但是当下拉菜单关闭时我无法获得任何动画，你是怎么做到的？

This issue看起来与我看到的非常相似，fix for the issue似乎与我想要的非常密切相关。但我真的不明白如何应用它来获取下拉菜单上的动画。

作为附注，但可能相关的是我想使用/ am使用animate.css包作为我的css动画的基础。

Answer 1

刚刚遇到同样的问题并花了数周的时间尝试制作双向淡入淡出动画，我想出了棘手的CSS解决方案。几乎完成了，我看了一下Angular-UI Modal中的Fade动画以及我发现的内容：

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

在检查了问题#1465并深入了解Angular Docs（addClass / removeClass方法）后，我将其转移到了Angular-UI Dropdown以及我到目前为止所获得的内容： http://plnkr.co/edit/KO41KkAFnCog3Vfl08Uf?p=preview

以下是我的CSS的最后一个版本：

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

希望有助于节省您的时间。

添加角度动画到bootstrap下拉列表

1 个答案: