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

问题描述

我有一个 Angular UI 网格元素.我定期在数据数组的前面添加新项目.我一次只添加几个(比如 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 网格看起来可以顺利添加它们.

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，然后使用承诺处理程序来一旦 $animate.addClass() 完成，实际上删除该行.这是 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-grid-and-row-animations

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屋！