1

I'am trying to remove a button with animation onClick. The animation starts, but once it hits the text content inside the button the animation slows down a lot.

I have made codesandbox to show the issue: https://codesandbox.io/s/9y1pov351y

As you can see the two boxes with text inside stops up, but the one without text doesn't. Anyone know what the issue might be?

Moddaman
  • 2,538
  • 3
  • 23
  • 41

1 Answers1

1

Correct me if i'm wrong but from what i see, you're transitioning with flex-basis, If you change the flex basis manually you can see the button doesnt even resize. I think this is due to flex not wanting to size the container smaller than the content.

I think you should be able to fix this if you find a non flex way to resize the button. I tried manually changing the width of the button directly and that had a normal reaction.

I hope this helps!

Edit: I googled a bit about it, and flex items have a min-width and min-height of auto, which you should be able to overwrite.

Why don't flex items shrink past content size?

Tino T.
  • 26
  • 1
  • 5
  • The stackoverflow answer you're linking to has the answer. Flex items have two properties min-width and min-height, which by default is set to auto. Override by setting them to 0 – Moddaman Mar 20 '19 at 11:12