Version 3 - animation stop working after the first action

[Bdragon93]

Code example https://codesandbox.io/s/react-animate-height-animate-height-when-content-changes-forked-ky6cvt?file=/src/index.js

Expected behavior

• Should have the same animation when adding the first item for all items that would be added.
• Works fine with v2.1.1 and v2.1.0 but v3.1.1.

Possible Solution

• Downgrade version to 2.1.1

Steps to Reproduce (for bugs)

1. Click "add" button to add the 1st item.
2. Click "add" button to add more items.

Your Environment

• Version used: 3.1.1
• OS: MacOS 13.2.1 (22D68)
• Browser: Brave/Chrome
• Version: 112.0.5615.121

Additional context

• The same with #137

[Stanko]

Hey @Bdragon93, In version 3 onAnimationEnd was renamed to onHeightAnimationEnd, to avoid collision with the native method. https://github.com/Stanko/react-animate-height#breaking-changes

Just swap it, and the example you added should start working: https://codesandbox.io/s/react-animate-height-animate-height-when-content-changes-forked-eggitr

Cheers!

[Stanko]

P.S. Please be aware that AnimateHeight wasn't made with this specific usecase in mind. Having fixed height can result in content being cut off when user changes window size.

[Bdragon93]

@Stanko Great thanks, that was my bad, I was switching versions for testing and forgot to adjust that prop then. However, would be helpful if you remove onAnimationEnd totally, no error when I pass the old named (wrong) prop and it even work for the first time as I mentioned

[Stanko]

It is a native event, so it gets handy sometimes: https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event