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

Question

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

我希望 UI 网格能够为添加的新行设置动画。现在，行是立即添加的，这让人很紧张。我想让新行在其中进行动画处理，这样 UI 网格看起来就可以顺利地添加它们了。

这很容易实现吗？有这个选项吗？

Answer 1

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

相反，您可以使用 $animate 服务在添加和删除行等用户交互时手动触发动画。这个 "fakes" 过渡，使它看起来像 DOM 已经改变，但实际上没有。

假设您想在新行中淡入淡出。您需要在传入的行数据上有一些标识符，并根据它有选择地应用和删除 class。您会立即设置 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 class 将从完全不透明度过渡到 0，然后使用一个承诺处理程序，一旦 $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

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

How to animate Angular ui-grid when rows are added

angular-ui-grid