Question

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

我希望UI Grid为要添加的新行设置动画。现在，行立即被添加，这使它变得有弹性。我希望新的行能够进行动画处理，以便UI网格看起来能够平滑地添加它们。

这很容易吗？这有选择吗？

Answer 1

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

相反，您可以使用$ animate服务手动触发用户交互动画，例如添加和删除行。这个＆＃34;假货＆＃34;转换，使它看起来像DOM已经被改变了它没有。

假设你想淡入新行。您需要在行数据上加上一些标识符，并有选择地应用＆amp;基于此删除一个类。您需要立即设置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

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

1 个答案: