禁用 Angular UI Grid 列菜单动画

Question

当我单击 Angular UI Grid 列的箭头图标以显示该列的下拉菜单，然后再次单击箭头图标将其隐藏时，菜单以动画方式“弹出”，我认为这是不受欢迎的。

如何禁用此行为？

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
}

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