添加行时如何为 Angular ui-grid 设置动画

我有一个 Angular UI 网格元素。我定期在数据数组的前面添加新项目。我一次只添加一些（例如 1 到 5 个新项目）

我希望 UI 网格能够为添加的新行添加动画效果。现在，行会立即添加，这使得它变得紧张。我想要将新行添加到动画中，以便 UI 网格看起来可以顺利地将它们添加到其中。

这容易实现吗？有这个选择吗？

这是一个有点困难的问题，因为 UI-Grid 虚拟化了数据，因此没有实际的 DOM 元素被添加和删除，或者隐藏和显示。这意味着您不能使用常规的 Angular 动画指令。

相反，您可以使用 $animate 服务手动触发用户交互的动画，例如添加和删除行。这会“伪造”转换，使 DOM 看起来像是已更改，但实际上并未更改。

假设您想淡入新行。您需要在传入的行数据上有一些标识符，并有选择地应用和删除基于该标识符的类。你会设置opacity: 0立即，然后使用$animate.removeClass()过渡到opacity: 1。 CSS 可能如下所示：

.new-row {
  opacity: 0;
}

.new-row-remove {
  -webkit-transition: 1s linear all;
  -moz-transition: 1s linear all;
  -o-transition:1s linear all;
  transition: 1s linear all;
  opacity: 0;
}

.new-row-remove-active {
  opacity: 1;
}

要删除行，您需要反转操作：添加一个delete-row将从完全不透明度过渡到 0 的类，then使用承诺处理程序实际删除该行一次$animate.addClass()已经完成了。这是 CSS：

.delete-row-add {
  -webkit-transition: 0.5s linear all;
  -moz-transition: 0.5s linear all;
  -o-transition: 0.5s linear all;
  transition: 0.5s linear all;
  opacity: 1;
}

.delete-row-add-active {
  opacity: 0;
}

这就是简短的答案。对于更长的解释和演示，我在这里提供了一篇文章：http://brianhann.com/ui-grid-and-row-animations http://brianhann.com/ui-grid-and-row-animations