禁用 Angular UI 网格列菜单动画

Question

当我单击 Angular UI 网格列的箭头图标以显示该列的下拉菜单，然后再次单击箭头图标将其隐藏时，菜单 "shoots"以一种动画的方式出现，我觉得这是不受欢迎的。

如何禁用此行为？

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 执行的动画；相反，这会禁用所有动画一般。

来自原回答：

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>

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

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

我可以看到使用此方法的唯一真正缺点是您不能有选择地禁用列 and/or 网格菜单的动画，只能同时禁用两者。