Help with transitionend event not always firing when a transition using CSS classes finishes

[philwolstenholme]

Hi,

Please could someone take a look at this Codepen? https://codepen.io/philw_/pen/PojdweM

Every time the button is clicked the transition example from https://alpinejs.dev/directives/transition#applying-css-classes takes place, and we log how many times the button has been clicked and also how often the transitionend event has fired.

Sometimes, the transitionend event fires every time the button is clicked. Great! But sometimes after a page load, now the transitionend event misses some of the transitions and so the button count and the transition count become out of sync. If it looks like it's working, please could you reload the page, and try again by clicking the button maybe 10 or so times? After a few reloads you should find that things get out of sync.

Does anyone know why this happens? It seems perhaps related to #832 ?

[Tim-Wils]

@philwolstenholme Something like this maybe? https://jsfiddle.net/n9rwzeLm/

[philwolstenholme]

Oooh, that seems much more reliable! I fixed a typo in the transitioncancel event in this forked pen: https://jsfiddle.net/philw_/7og4cd36/