Doesn't work on Chrome

[trsh]

Sorry, but for me this doesn't work at all in Chrome.

When the line

this.timeout = setTimeout(this.flushClassNameQueue, TICK);

is fired and active class is added, the "transitionend" event is fired right away and the translation ends before really starting :(

[trsh]

I mean I got the idea, that the class is added after some time (TICK), so Browser starts the transition, but it simply doesn't work that way :/. It happens immediately.

[developit]

Do you have a valid CSS transition defined? If there is an issue with the animation it will fire immediately. Try again with 1.3.0 now that #13 is merged.

[trsh]

@developit ok I will. And report back.

[trsh]

@developit it works better, but no good. I created a fiddle to show the 1st problem

https://jsfiddle.net/kvp3dmsa/11/

This is kind of the idea of react transition - a) add initial class (leave/enter), b) then after a tick add active class and the magic should happen. But it doesn't. It only doe's of I move "transition: opacity 2s ease-in;" to .active class. And its same for this module. SOME-HAVE (and it drives me mad) it does's work for React original router.

The second things is, that some-have, after leave and it's active class is removed, there is a small delay before the actual component is removed, and this creates a ugly FLASH glitch :/

[developit]

You need to put transition in .active:
https://jsfiddle.net/developit/kvp3dmsa/12/

[trsh]

@developit yes, I wrote that.

"It only doe's of I move "transition: opacity 2s ease-in;" to .active class"

but why then ReactCssGroup and this fork has transition in enter class (https://github.com/developit/preact-css-transition-group/blob/master/tests/style.css). Any why does it work for React and not for this fork :D !??

[trsh]

@developit eh ... ended up rolling my own lite custom version (~60 lines of code). Work perfect