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

Question

我有一个 Angular UI Grid 元素。我定期在数据数组的前面添加新项目。我一次只添加几个(比如 1 到 5 个新项目)

我希望 UI 网格为添加的新行设置动画。现在行会立即添加，这使它变得很紧张。我想为新行添加动画，以便 UI 网格看起来可以顺利添加它们。

这很容易吗？有没有这个选项？

Answer 1

这是一个有点困难的问题，因为 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 的类，然后使用 promise 处理程序实际删除该行一次 $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