bug: ReactTransitionEvents doesn't work in supported browsers

[Hotell]

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request

Current behavior

Issue is that you are registering TransitionEnd / AnimationEnd in browsers that support ontransitionend/onanimationend -> this leads that not existent event is registered in supported browsers and things don't work.

Expected/New behavior

register proper events cross-browser

Minimal reproduction of the problem with instructions

For instance react-redux-toaster is using ReactTransitionEvents for registering transition events.

With React works without issues

With Preact, the proper events are not called so it is not removed from store and stays in DOM

What is the motivation / use cases? Some react libs are using ReactTransitionEvents for critical functionality ( like cleaning up store )

Preact-compat version: 3.16.0

Browser: Chrome, FF, Edge, Safari

I can send PR if you're ok with that

Thanks

[thomas-p-wilson]

Am having the exact same issue here, also with react-redux-toastr in fact.

[developit]

Perhaps we can use the implementation from css transition group? https://github.com/developit/preact-css-transition-group/blob/master/src/TransitionEvents.js#L74

[thomas-p-wilson]

Well, at the to of the source file we have a block for determining the transitionend "prefix". I'm locally testing an implementation that makes use of https://gist.github.com/O-Zone/7230245, which is itself a derivative of https://github.com/EvandroLG/transitionEnd/ which is recommended by the Modernizr folks. Would this be acceptable as a PR?

On Sat, Jun 10, 2017 at 11:24 AM, Jason Miller [email protected] wrote:

Perhaps we can use the implementation from css transition group? https://github.com/developit/preact-css-transition-group/blob/master/src/ TransitionEvents.js#L74

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/developit/preact-compat/issues/396#issuecomment-307571661, or mute the thread https://github.com/notifications/unsubscribe-auth/AAkeu1Qn0j4v6EpFkZCrHLhpmdlPjkEgks5sCrU2gaJpZM4Nygw2 .

[thomas-p-wilson]

That is to say, having not investigated the TransitionEvents bit, this is the route I have started with. Will investigate TransitionEvents shortly.

On Sat, Jun 10, 2017 at 11:54 AM, Thomas Wilson [email protected] wrote:

Well, at the to of the source file we have a block for determining the transitionend "prefix". I'm locally testing an implementation that makes use of https://gist.github.com/O-Zone/7230245, which is itself a derivative of https://github.com/EvandroLG/transitionEnd/ which is recommended by the Modernizr folks. Would this be acceptable as a PR?

On Sat, Jun 10, 2017 at 11:24 AM, Jason Miller [email protected] wrote:

Perhaps we can use the implementation from css transition group? https://github.com/developit/preact-css-transition-group/blo b/master/src/TransitionEvents.js#L74

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/developit/preact-compat/issues/396#issuecomment-307571661, or mute the thread https://github.com/notifications/unsubscribe-auth/AAkeu1Qn0j4v6EpFkZCrHLhpmdlPjkEgks5sCrU2gaJpZM4Nygw2 .

[thomas-p-wilson]

Cool. Looks like that's roughly how TransitionEvents works anyways

On Sat, Jun 10, 2017 at 11:56 AM, Thomas Wilson [email protected] wrote:

That is to say, having not investigated the TransitionEvents bit, this is the route I have started with. Will investigate TransitionEvents shortly.

On Sat, Jun 10, 2017 at 11:54 AM, Thomas Wilson [email protected] wrote:

Well, at the to of the source file we have a block for determining the transitionend "prefix". I'm locally testing an implementation that makes use of https://gist.github.com/O-Zone/7230245, which is itself a derivative of https://github.com/EvandroLG/transitionEnd/ which is recommended by the Modernizr folks. Would this be acceptable as a PR?

On Sat, Jun 10, 2017 at 11:24 AM, Jason Miller [email protected] wrote:

Perhaps we can use the implementation from css transition group? https://github.com/developit/preact-css-transition-group/blo b/master/src/TransitionEvents.js#L74

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/developit/preact-compat/issues/396#issuecomment-307571661, or mute the thread https://github.com/notifications/unsubscribe-auth/AAkeu1Qn0j4v6EpFkZCrHLhpmdlPjkEgks5sCrU2gaJpZM4Nygw2 .

[deepkolos]

have the same issue

the first one is created by preact , won't trigger when transitionend the second is created by addEventlistener, will trigger when transitionend

i use ontransitionend as workround...