Applying AutoAnimate to table rows destroys row display format

[ThenTech]

Straightforward and easy to use library so far.

I was however testing out animations on tables, sorting (rows moving) and removing filters (adding rows) work great. But removing rows, collapses the style of them and make them weirdly float outside the table. Also the sizing of the parent during the animation looks off.

Example in this sandbox: https://codesandbox.io/s/upbeat-kapitsa-hx0mvd?file=/src/App.js

Any advice on how to handle this? (without styling plain divs to look like a table)

[justin-schroeder]

Great point — we might need to handle tables a bit better. We'll try to push out a fix by/on Monday.

[kasparsuvi1]

Is there any update on this?

[kasparsuvi1]

@justin-schroeder Hey, sorry for pinging once more. Have you had time to give a look at it? This seems important feature if it is possible to add.

[needim]

just stumbled upon this from https://github.com/samselikoff

sandbox: https://codesandbox.io/s/github/samselikoff/2022-08-04-animated-table?file=/pages/index.tsx repo: https://github.com/samselikoff/2022-08-04-animated-table

edit: also there is a video in which he explains things: https://www.youtube.com/watch?v=IfAv4NSv-nA

maybe we can get some tips from it and improve this library! I will dive into it tomorrow if I have some time.

[justin-schroeder]

Thanks for the suggestion. I took a look at it, and unfortunately its using some techniques that probably wont work for us, like fixed column widths.

[rberneder]

Is there any progress on this?

[justin-schroeder]

Currently havent found a way to do this automatically. Ive done a number of tests, and the sequence of sizing/painting the browser does (for tables) is pretty wacky and – at the moment not very compatible with auto-animate. Still something Im interested in solving for though.

[BorisSavage]

Got the same problem - this nice library unfortunately does not handle row removal well in grid/flex layouts. Spent a whole day trying to figure out what was wrong with my code. Turns out it's the first time it's objectively the library's issue, not mine. ¯\(ツ)/¯

[mjyoung]

Has anyone figured out a good workaround for this? Would love to use this with tbody tr

[kevinashworth]

For table tbody tr add/remove, I'm liking the results a little more than the defaults through simplifying the animation through a custom plugin:

const [parent] = useAutoAnimate((el, action) => {
  let keyframes;
  if (action === "add") {
    keyframes = [
      { transform: "scale(.98)", opacity: 0 },
      { transform: "scale(1)", opacity: 1 },
    ];
  }
  if (action === "remove") {
    keyframes = [
      { transform: "scale(1)", opacity: 1 },
      { transform: "scale(.98)", opacity: 0 },
    ];
  }
  if (action === "remain") {
    keyframes = [{ opacity: 0.98 }, { opacity: 1 }];
  }
  return new KeyframeEffect(el, keyframes, { duration: 250, easing: "ease-in-out" });
});

I've also added overflow-hidden to the containing div, which seems to hide the final "flash". But only sometimes.

[VladBrok]

For table tbody tr add/remove, I'm liking the results a little more than the defaults through simplifying the animation through a custom plugin:

const [parent] = useAutoAnimate((el, action) => {
  let keyframes;
  if (action === "add") {
    keyframes = [
      { transform: "scale(.98)", opacity: 0 },
      { transform: "scale(1)", opacity: 1 },
    ];
  }
  if (action === "remove") {
    keyframes = [
      { transform: "scale(1)", opacity: 1 },
      { transform: "scale(.98)", opacity: 0 },
    ];
  }
  if (action === "remain") {
    keyframes = [{ opacity: 0.98 }, { opacity: 1 }];
  }
  return new KeyframeEffect(el, keyframes, { duration: 250, easing: "ease-in-out" });
});

I've also added overflow-hidden to the containing div, which seems to hide the final "flash". But only sometimes.

@kevinashworth, thanks, your solution helped!