Weird animation of 0-sized elements

[RomeoDespres]

Because I'm using some dynamic filtering, the elements I wrap in Flipper sometimes end up having a 0px height. They display fine when nothing moves, but when a flip animation is triggered, it seems react-flip-toolkit gives them a non-zero height only during the animation. It results in a buggy look and feel. Not sure if it's a bug or a known feature, but I'd appreciate any advice on how to avoid this!

See codesandbox here

const ListShuffler = () => {
  const [data, setData] = useState([...Array(200).keys()]);
  const shuffleList = () => setData(shuffle(data));

  // Say user has filtered to only show multiples of 50
  const n = 50;

  return (
    <Flipper flipKey={data.join("")}>
      <button onClick={shuffleList}> shuffle</button>
      <div style={{ fontFamily: "Arial", fontSize: "2.5rem" }}>
        {data.map((d) => (
          <Flipped key={d} flipId={d}>
            <div style={{ height: d % n === 0 ? 50 : 0 }}>
              {d % n === 0 ? d : null}
            </div>
          </Flipped>
        ))}
      </div>
    </Flipper>
  );
};

[aholachek]

Hi, thanks for describing this issue so clearly! The min-height of 1px that's being applied by react-flip-toolkit is meant to avoid buggy animations caused by animating to 0 height or width in Chrome, but I see that is not desirable here since the hidden elements aren't being animated. I'll update the library to skip adjusting heights and widths for non-animated flipped components, and comment here when I've published the new version, hopefully in the next day or so.

[RomeoDespres]

Hi, great thanks for your quick response. Looking forward to see this solved :)

[aholachek]

I've just published a beta version (7.0.13-1) that I believe will solve this and similar problems: https://codesandbox.io/s/react-flip-toolkit-list-shuffle-example-forked-3sgqh

I need to QA it a bit more since I also included some housekeeping tasks, but I hope to publish the patch version by tomorrow.

[aholachek]

This should be fixed in 7.0.13, please let me know if you still have any issues.

[RomeoDespres]

Works as a charm, thanks a lot! This library is really awesome :)