useTransition: out of sync when used multiple times quickly

[pySilver]

What would be the proper way to handle the situation when leave/enter is called multiple times in a short time window that causes element being out of state? Element is hidden instead of being shown.

Is there a lock or promise cancellation method so I can be sure that final state of an element is correct?

[hms]

I just bumped into this too.

It looks like some transition classes are being left on the target rather than being removed if one cycles the transition too fast. Once that happens, there is no way to recover other than refreshing the page (i.e., follow on requests to transition don't clear the lingering classes from the previous cycle)

@pySilver while ugly, ugly, ugly, I added a cleanup() as the first step in any functions that trigger a transition. The cleanup() basically does a target.classList.remove(...AllOfTheTransitionClasses) which seems to solve for now.

[pySilver]

@hms I've switched to el-transition which has promise support and had no issues since then.

[marcoroth]

Is there any chance we can improve this in Stimulus Use as well, so that all people can benefit from it?

[hms]

@marcoroth I hate like hell asking for even more of your help given how much you contribute here and elsewhere, but the JS involved is a little over my head.

I've tried adding useThrottle to my code that triggers a transition with no luck. My cleanup() hack seems to work no matter how hard I push state changes. Part of the problem, at least in my code, is I'm also using useHotKeys -- so I have lots of places in my Stimulus controller where a state change could be asked for -- and it doesn't look like throttling is a solution.

If I can find some time, I can try with el-transition to see if their promise based solution is all we need. If that works, it would suggest a direction for useTransition -- and possibly a bunch of other use* functions.

If I can help, I'm willing to try -- but I'll need you to point me in the right directions given I'll be learning as I go.

Hal