添加行时如何为Angular ui-grid制作动画 [英] How to animate Angular ui-grid when rows are added

问题描述

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

I have an Angular UI Grid element. I am periodically adding new items at the front of the data array. I'm only adding a few at a time (like 1 to 5 new items)

我希望UI网格为正在添加的新行设置动画.现在，立即添加了行，这使它变得跳跃.我希望对新行进行动画处理，以使UI Grid看起来像平滑地将它们添加到其中.

I would like the UI Grid to animate the new rows being added. Right now the rows are added immediately, which makes it jumpy. I want to the new rows to animate in so the UI Grid looks like it smoothly adds them in.

这很容易做到吗?有这个选项吗?

Is this easily possible? Is there an option for this?

推荐答案

这有点棘手，因为UI-Grid虚拟化了数据，因此没有添加或删除或隐藏或显示实际的DOM元素.这意味着您不能使用常规的Angular动画指令.

It's a bit of a difficult problem because UI-Grid virtualizes the data, so there's no actual DOM elements being added and removed, or hidden and shown. That means you can't use regular Angular animation directives.

相反，您可以使用$ animate服务在用户交互(例如添加和删除行)上手动触发动画.这样会伪造"过渡，使其看起来好像在DOM尚未更改时就被更改了.

Instead you can use the $animate service to manually trigger animations on user interactions like adding and deleting rows. This "fakes" the transition, making it look like the DOM has been altered when it hasn't.

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

Say you wanted to fade in new rows. You'd need to have some identifier on the row data coming in, and selectively apply & remove a class based on that. You'd set opacity: 0 immediately, then use $animate.removeClass() to transition to opacity: 1. The CSS might look like this:

.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处理程序实际上一次删除该行完成.这是CSS:

For deleting rows, you would need to reverse the operation: add a delete-row class that would transition from full opacity to 0, then use a promise handler to actually remove the row once $animate.addClass() is done. Here's the 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网格和行动画

That's the short answer. For a much longer explanation and a demo, I have a write-up available here: http://brianhann.com/ui-grid-and-row-animations

这篇关于添加行时如何为Angular ui-grid制作动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！