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?
Asked
Active
Viewed 1,862 times
3
-
1This is currently a bug due to some refactoring for IE9, it will hopefully be fixed in the next RC. – c0bra Jun 12 '15 at 11:41
-
Link to related issue on github: https://github.com/angular-ui/ng-grid/issues/3921#issuecomment-118548377 – Anil Jul 13 '15 at 17:21
-
2I really wish there was a way to simply disable animation for ui-gird without having to remove the ngAnimate module. I want to add animation to my SPA, but because of the UI-Grid bug, I have to remove the ngAnimate module. :( – Anil Jul 13 '15 at 17:22
2 Answers
2
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
Kathir
- 6,136
- 8
- 36
- 67
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-animateto 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.
