Dropdown menu doesn't have closing fade out effect

[erhanfirat]

As an AngularJS user, I am having difficulties about bootstrap directive effects.
Here for dropdown menus, I can simply add effect to open action by adding class to ul.dropdown-menu

                 <div class="dropdown pull-left" >
                        <button class="dropdown-toggle "><i
                                class="icon-chevron-down"></i></button>
                        <ul class="dropdown-menu my-drop-down-menu-effect">
                            <li ng-repeat="grade in studentGradeArray" >
                                <a class="menuItem"
                                   ng-click="itemClick(grade.value)"
                                   ng-bind="grade.name"></a>
                            </li>
                        </ul>
                    </div>

However, I cannot add effect to close action, so I have to change some code on ui.bootstrap.dropdownToggle directive:

        if (!elementWasOpen) {
          element.parent().addClass('open');
          openElement = element;
          closeMenu = function (event) {
            if (event) {
              event.preventDefault();
              event.stopPropagation();
            }
            $document.unbind('click', closeMenu);
              var menuUl = element.siblings('.dropdown-menu');
              menuUl.addClass('animated-fast animated-ease-in fadeOut');
              menuUl.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
                  function(e) {
                      jQuery(this).parent().removeClass('open');
                      menuUl.removeClass('animated-fast animated-ease-in fadeOut');
                  });
//            element.parent().removeClass('open');
            closeMenu = angular.noop;
            openElement = null;
          };
          $document.bind('click', closeMenu);
        }

Maybe css animation structure of AngularJS will be added to bootstrap library completely. It will be much easier for users. For example, ngHide effect usage:

.my-fade-down {
  @extend .animated-faster;
  @extend .animated-ease-out;
  @extend .fadeInUp;

  &.ng-hide-add { // closing css
    display:block!important;
    @extend .animated-faster;
    @extend .animated-ease-in;
    @extend .fadeOutDown;
  }

  &.ng-hide-remove { //opening css
  }

  &.ng-hide {
  }
}

[bekos]

@kirlisakal After e8d5fef has landed in master, I suppose it will be easier for you to do it.

[erhanfirat]

@bekos thank you...

[phuongnd08]

@bekos @kirlisakal Can you guy advice me on how I can use that to do animation when user click on dropdown? I'm expecting something like .ng-hide-add but obviously angular bootstrap is not setting such on my elements.

[phuongnd08]

Nevermind, my bad. Figured it out by looking at the DropdownController code :)

[deezil]

@phuongnd08 Total rookie here. Could you talk me through how you managed to add an animation on the dropdown? I've tried a CSS "opacity:0" on the .dropdown-menu but to no avail. :(

[deezil]

@kirlisakal - wondering if you could share how you've managed to get the fadeOut to work the Angular way? I've managed to create a fadeIn effect via CSS but fadeOut still seems to be a sticking point for me.

[phuongnd08]

@deezil It has been a while and I couldn't recall it. You may try looking at DropdownController code. It should have some pattern you can learn from there.

[antoinepairet]

@deezil please ask for support question on Stack Overflow and not here in the issue tracker.
rgds

[erhanfirat]

@deezil excuse me I am late...
as I wrote above, you should change ui.bootstrap.dropdownToggle directive code by this code..

    if (!elementWasOpen) {
      element.parent().addClass('open');
      openElement = element;
      closeMenu = function (event) {
        if (event) {
          event.preventDefault();
          event.stopPropagation();
        }
        $document.unbind('click', closeMenu);
          var menuUl = element.siblings('.dropdown-menu');
          menuUl.addClass('animated-fast animated-ease-in fadeOut');
          menuUl.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
              function(e) {
                  jQuery(this).parent().removeClass('open');
                  menuUl.removeClass('animated-fast animated-ease-in fadeOut');
              });

// element.parent().removeClass('open');
closeMenu = angular.noop;
openElement = null;
};
$document.bind('click', closeMenu);
}

As I remember, by this code, it works for me. Dont feel stricted about changing and manipulating library codes. It will give you experiment more...