What is the reson for Link animationend event bubbling up

1

Hi, I am using animate.css on a span element that wraps a Link that has an icon. Problem is that the Link animationend event bubbles up before the animate.css animation has ended, ending the animation effect prematurely.

Is there a reason it needs to bubble up?

My current workaround is to wrap it in an intermediate span which swallows the event via stopPropagation as in:

return <span
        ref={ref}
        style={{ display: 'inline-block' }}
        onClick={(e) => setAnimation('onClick')}
        onAnimationEnd={animationEnd}>
        <span onAnimationEnd={(e) => e.stopPropagation()}>
            {children}
        </span>
    </span>