Animation Called On Incorrect Element

[kmccullough]

Bug description:

Here is a look at the code in question:

var openContainer = appendTo ? appendTo : $element;
var hasOpenClass = openContainer.hasClass(appendTo ? appendToOpenClass : openClass);

if (hasOpenClass === !isOpen) {
  $animate[isOpen ? 'addClass' : 'removeClass'](openContainer, appendTo ? appendToOpenClass : openClass).then(function() {
    if (angular.isDefined(isOpen) && isOpen !== wasOpen) {
      toggleInvoker($scope, { open: !!isOpen });
    }
  });
}

Note openContainer is either the uib-dropdown container or whatever element was appended to (in my case BODY). $animate.addClass is therefore called on the PARENT to the actual element that should be animated, rather than the actual menu element that should be animated. My expectation is that $animate be used on the ui-bootstrap-menu.

Link to minimally-working plunker that reproduces the issue:

In the following plunker are two implementations for animating a dropdown with a JavaScript animation using ngAnimate. The first one uses the uib-dropdown-open class added to the body element, and then tries to select the right dropdown-menu from there, to perform the animation on. The second button simulates putting the $animate.addClass call on the dropdown-menu itself. It seems the implementation for this should follow the second example, so that animation can be applied directly to the element in question.

http://plnkr.co/edit/ryvHWznBm4eXeY4oo4AT?p=preview

Version of Angular, UIBS, and Bootstrap

Angular:1.5.3

UIBS: 2.1.3

Bootstrap: 3.3.6