bug: ReactTransitionEvents doesn't work in supported browsers

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

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

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

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 ***@***.***> 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 <#396 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAkeu1Qn0j4v6EpFkZCrHLhpmdlPjkEgks5sCrU2gaJpZM4Nygw2> .

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 <thomas.paul.w@gmail.com> 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 ***@***.***> 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 > <#396 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AAkeu1Qn0j4v6EpFkZCrHLhpmdlPjkEgks5sCrU2gaJpZM4Nygw2> > . >

Cool. Looks like that's roughly how TransitionEvents works anyways On Sat, Jun 10, 2017 at 11:56 AM, Thomas Wilson <thomas.paul.w@gmail.com> 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 ***@***.***> 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 ***@***.***> > 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 >> <#396 (comment)>, >> or mute the thread >> <https://github.com/notifications/unsubscribe-auth/AAkeu1Qn0j4v6EpFkZCrHLhpmdlPjkEgks5sCrU2gaJpZM4Nygw2> >> . >> > >

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...

Navigation Menu

Repository navigation

bug: ReactTransitionEvents doesn't work in supported browsers #396

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

bug: ReactTransitionEvents doesn't work in supported browsers #396

Description

Activity

thomas-p-wilson commented on Jun 10, 2017

developit commented on Jun 10, 2017

thomas-p-wilson commented on Jun 10, 2017

thomas-p-wilson commented on Jun 10, 2017

thomas-p-wilson commented on Jun 10, 2017

deepkolos commented on Nov 12, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions