Transition hangs if the transition is immediately cancelled

[nkovacs]

Fiddle: http://jsfiddle.net/nkovacs/eaf85xfa/

I think the transitionend event is not fired, since no transition happened.

Using a callback in enter and leave fixes it: http://jsfiddle.net/nkovacs/eaf85xfa/1/

But this has two problems:

1. if the enter animation is cancelled, it still waits for the callback of component 1's leave animation before the second component can start animating in. The leave hook would have to take into account the elements current opacity and calculate the correct timeout. (e.g.: http://jsfiddle.net/nkovacs/mrfysga5/)
2. If you click the button again, there will be two "Component 2"'s on the page, one leaving, one entering. Keep clicking it and you'll have several.

[nkovacs]

Thanks. Unfortunately, this doesn't fix the issue if I use setTimeout, e.g.: http://jsfiddle.net/nkovacs/eaf85xfa/2/

On Chrome, with 10ms it never works, with 50 ms, it sometimes does.

A more realistic test case: http://jsfiddle.net/nkovacs/5oz19aoz/ (keep clicking the link quickly)
I wasn't able to break it on Chrome just by clicking fast enough, but I was able to do it on Firefox. It was also easier to do it when the computer was swapping on Firefox.
The entering div also gets pushed down by the leaving one when you do it fast enough. On a real app, I have enough time to move the mouse from one menu item to the other one and click it for this to happen.

[nkovacs]

I did some testing with requestAnimationFrame. Setting justEntered to false on the next frame was not always enough on firefox, in fact, even nesting two requestAnimationFrames wasn't enough. And that's not with setTimeout, it's me clicking the menu items, including mouse movement from one menu item to the other, or using back/forward on my mouse.

[yyx990803]

The real reason for this, is because you have the same styles for .page-enter and .page-leave. If you toggle the enter leave fast enough, the opacity hasn't started interpolating yet and is still 0 when .page-leave gets applied, thus no CSS transition is triggered, and the transitionend event never fires.

A simple but quite unintuitive fix is by giving .page-enter a tiny value different from .page-leave, for example opacity: 0.01.

[nkovacs]

Yeah, I know, I was hoping it would be possible to fix using requestAnimationFrame, but it looks like it's pretty much impossible to do.