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

Question

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

我希望UI Grid为要添加的新行设置动画.现在,行立即被添加,这使它变得有弹性.我希望新的行能够进行动画处理,因此UI Grid看起来很平滑地添加它们.

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

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