加入角的动画来引导下拉 [英] adding angular animation to bootstrap dropdown

问题描述

我要动画添加到我的角度应用程序中的一个下拉的开幕式和闭幕式。到目前为止，我还可以得到开放动画的下拉工作，但没有什么密切的动画。

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.

我把自举的例子导航栏code直线，并与一些小的修改，添加到我的网页。导航栏的相关部分是这样的：

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>

我还使用角度引导太行：

I'm also using angular bootstrap so the line:

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

触发角自己的下拉指令。

triggers angular's own Dropdown directive.

我发现只需添加一个类的内部＆LT; UL类=下拉菜单...＆GT;元素我可以得到一个不错的开放式动画。

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. 动画下拉打开时的作品，但是当下拉关闭，你怎么做到这一点？
我不能让任何动画

1. Is this the correct 'angular' way to add the animation?
2. The animation works when the dropdown opens, but I can't get any animation when the dropdown closes, how do you do this?

这个问题看起来非常相似，我所看到的和< A HREF =htt​​ps://github.com/angular-ui/bootstrap/commit/e8d5fefcff794fce28c16c638d9f7baa624c7809相对=nofollow>定为似乎是很密切的关系我想要什么的问题。但我真的不知道如何应用它来获得的下拉关闭动画。

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.

作为一个方面说明，但也可能是相关的，我想用/ AM使用动画。 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-解决方案双向的动画渐变。几乎做到了，我在角UI莫代尔看了看动画渐变什么，我发现：

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 并在角做了深入探讨文档（addClass / removeClass移除方法），我调到这角UI下拉什么，我这么远：
http://plnkr.co/edit/KO41KkAFnCog3Vfl08Uf?p=$p$pview

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