将角度动画添加到引导下拉菜单 [英] adding angular animation to bootstrap dropdown

问题描述

我想在我的 angular 应用程序中为下拉菜单的打开和关闭添加动画.到目前为止，我可以在下拉菜单中使用打开动画，但对于关闭动画则没有.

I want to add animations to the opening and closing of a dropdown in my angular app. So far I can get open animations working on the dropdown, but nothing for close animations.

我直接从引导程序示例中获取了导航栏代码，并在稍作修改后将其添加到我的页面中.导航栏的相关部分是这样的:

I took the navbar code straight from the bootstrap example and added it to my page with some minor modifications. The relevant part of the navbar is this:

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

我也在使用 angular bootstrap 所以这条线:

I'm also using angular bootstrap so the line:

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

触发 angular 自己的 Dropdown 指令.

triggers angular's own Dropdown directive.

我注意到通过简单地将一个类添加到内部 <ul class="dropdown-menu" ...>element 我可以得到一个很好的打开动画.

I noticed by simply adding a class to the inner <ul class="dropdown-menu" ...> element I could get a nice open animation.

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

2 个问题:

1. 这是添加动画的正确角度"方式吗?
2. 下拉菜单打开时动画有效，但下拉菜单关闭时我无法获得任何动画，你怎么做?

这个问题看起来与我所看到的非常相似，修复问题 似乎与我想要的密切相关.但我真的不明白如何应用它来在下拉关闭时获得动画.

This issue looks very similar to what I'm seeing and the fix for the issue seem to be very closely related to what I want. But I don't really understand how to apply it to get animations on the dropdown close.

作为旁注，但可能相关的是我想使用/正在使用 动画.css 包作为我的 css 动画的基础.

As a side note, but possibly relevant is I'd like to use/am using the animate.css package as a base for my css animations.

推荐答案

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

Just faced out with the same issue and spent weeks trying to make two-way fade animation I came up with tricky CSS-solution. Almost done, I've took a look at Fade animation in Angular-UI Modal and what I have found:

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

在检查了问题 #1465 后，更深入地了解了 Angular文档(addClass/removeClass 方法)我把它转移到了 Angular-UI Dropdown 以及我到目前为止所得到的:http://plnkr.co/edit/KO41KkAFnCog3Vfl08Uf?p=preview

After checked out the issue #1465 and made a deeper look at Angular Docs (addClass/removeClass methods) I transferred this to Angular-UI Dropdown and what I've got so far: http://plnkr.co/edit/KO41KkAFnCog3Vfl08Uf?p=preview

这是我的 CSS 的最后一个版本:

Here is the last version of my 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;
}

希望它有助于节省您的时间.

Hope it helps to save your time.

这篇关于将角度动画添加到引导下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！