禁用Angular UI Grid列菜单动画

Question

当我点击Angular UI Grid列的箭头图标以显示该列的下拉菜单时，再次单击箭头图标将其隐藏，菜单以动画方式“拍摄”，我发现这是不合适的。< / p>

如何禁用此行为？

Answer 1

ngAnimate模块负责动画。您可以从应用程序中排除它。如果任何依赖的js库需要ngAnimate，那么这可能是不可能的。

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

没有ngAnimate的示例

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

Answer 2

如this answer中所述，有一种通用的，非UI-Grid特定的方法来禁用特定元素的动画。请注意，这不会影响ngAnimate所犯的仅动画动画。相反，这会禁用所有动画一般。

从原来的回答：

  

只需将其添加到您的CSS中即可。最好是最后一条规则：

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

     

然后将no-animate添加到要禁用的元素类中。   例如：

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

因此，要禁用网格菜单的动画，请执行以下操作（使用Sass，但您明白了这一点）：

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

我可以通过这种方法看到的唯一真正缺点是，您无法同时禁用列和/或网格菜单的动画。