Clever Geek Handbook

Disable Angular grid header menu animation

When I click on the Angular UI Grid column arrow icon to display the dropdown menu for that column, then click the arrow icon again to hide it, the menu "shoots" upwards in an animated manner, which I find undesirable.

How do I disable this behavior?

+3


source to share


2 answers


The ngAnimate module is responsible for animation. You can exclude this 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 ngAnimate

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

+2


source


As described in this answer , there is a generic, non-UI-Grid-specific way of disabling animations for certain elements. Note that this does not only affect the animation being executed ngAnimate

; rather, it turns off all animations altogether.

From the original answer:

Just add this to your CSS. Better if this is the last rule:

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

then add no-animate

to the class of the element you want to disable. Example:

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


So, to disable animation of grid 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 drawback I see with this method is that you cannot selectively turn off animations for the Column and / or Grid menu, only for both at the same time.

+2


source






More articles:


All Articles