Applying AutoAnimate to table rows destroys row display format about auto-animate HOT 11 OPEN

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

from auto-animate.

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.

from auto-animate.

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. ¯\(ツ)/¯

from auto-animate.

@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.

from auto-animate.

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.

from auto-animate.

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!

from auto-animate.

Is there any update on this?

from auto-animate.

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.

from auto-animate.

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.

from auto-animate.

Is there any progress on this?

from auto-animate.

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

from auto-animate.