Adding rows to tables - animate on delete and add

[alpower]

Would be nice to have a facility to animate (read flash) in newly added rows to tables, and also before you remove them, grey them out, so users know what's been changed.

I think you would have to compare data changing in componentShouldUpdate or similar and mark those things that have been removed or added, and somehow add classes to them.

For adding, some CSS like this would suffice:

.flash {
  -webkit-animation-name: flash-animation;
  -webkit-animation-duration: 3s;

  animation-name: flash-animation;
  animation-duration: 3s;
}

@-webkit-keyframes flash-animation {
  from { background: yellow; }
  to   { background: default; }
}

@keyframes flash-animation {
  from { background: yellow; }
  to   { background: default; }
}

[JakeSidSmith]

We can use CSSTransitionGroup to handle the animation of adding / removing items.

Though I think this should be activated with an animate prop, so as not to do so for all tables.