onAnimationEnd and children

[pryahin]

Hello, I found a strange behavior on the onAnimationEnd event. If an element has a child that has an animation, the onAnimationEnd event will be triggered after the animation of the child has completed.

I think that onAnimationEnd should only work for AnimateHeight element, and should not be triggered on children's animations.

[Stanko]

Hello @pryahin, I can't replicate what you are describing, check the quick example I made: https://codesandbox.io/s/241mpxk9x0

Please try to recreate the issue on https://codesandbox.io so I can investigate what is happening.

Cheers!

[pryahin]

I meant that if an element has a css-animation and at the same time it is an AnimateHeight child, then at the end of the animation of this element, the parent's onAnimationHeight will work

Try adding this code to the style.css

@keyframes open {
  from {
    opacity: 0;
  }
  to {
    opacity: 1
  }
}

h2 {
  animation: open 1s ease-in-out
}

[Stanko]

Woah! 😄 Great catch, I think I know what it is. Let me investigate and I'll get back to you asap.

[Stanko]

@pryahin bug fixed in version 2.0.5 🎉

I just omitted onAnimationStart and onAnimationEnd from being passed to the element directly. https://github.com/Stanko/react-animate-height/blob/b491426085705f7f6766c41995561e0ed08ecbad/source/AnimateHeight.js#L18-L30

Thing is that callback names were identical to the native DOM handlers, and they were attached here:

https://github.com/Stanko/react-animate-height/blob/b491426085705f7f6766c41995561e0ed08ecbad/source/AnimateHeight.js#L333-L335

I'm passing all props to the element to allow users to pass any accessibility props directly to the div, but I forgot to omit these two.

Links to the native event handlers:

• https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onanimationstart
• https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onanimationend

I updated the example here: https://codesandbox.io/s/r47yk1ml84

Cheers!