Disable Angular UI Grid column menu animation

Question

When I click on an Angular UI Grid column's arrow icon to show the dropdown menu for that column, then click the arrow icon again to hide it, the menu "shoots" up in an animated fashion, which I find undesirable.

How can I disable this behavior?

Answer 1

The ngAnimate module is responsible for the animation. You can exclude that from the application. If any of your dependent js libraries require ngAnimate then this may not be possible.

var app = angular.module('app', ['ngTouch', 'ui.grid']);

Example without the ngAnimate

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

Answer 2

As described in this answer, there is a generic, non-UI-Grid-specific way of disabling animations for specific elements. Note that this doesn't affect only animations perpetrated by ngAnimate; rather, this disables all animations in general.

From the original answer:

Just add this to your CSS. It is best if it is the last rule:

.no-animate {
   -webkit-transition: none !important;
   transition: none !important;
}

then add no-animate to the class of element you want to disable. Example:

<div class="no-animate"></div>

So, to disable animation of the grid's menus, do the following (using Sass, but you get the idea):

.ui-grid-menu-mid {
  @extend .no-animate; // the .ng-animate class is as defined above
}

The only real downside that I can see with this method is that you can't selectively disable animations for column and/or grid menus, only for both at the same time.