How to animate Angular ui-grid when rows are added

Question

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)

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?

Answer 1

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.

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.

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;
}

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;
}

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