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.

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.

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

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?

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.

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.

回答1:

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>

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

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.