Its me again, still battling along to get my flyout gallery system to work like I want it!
After trying all sorts of tricks, time delays and intermediate classList changes to my transitioning divs to try and make it work like I want it, entirely without success, I realised something very important! If a transition is triggered by a classList or other kind of class change, the code does not wait until the transition has completed before continuing to execute! If I make two classList changes to the same element in a row, the second one simply replaces the first one instantly and the first transition does not even get to begin. Doesn't matter how many classList I chain one after the other, only the last one makes any difference!
If I put an alert() in the middle of the sequence, the one before the alert() executes and I see it run to its end. After clicking OK the sequence "jumps" to the final transition.
I have just discovered the solution while wading through your and other tutorials online. I need to use the "transitionend" event!!!
Well, the weekend is here and I shall be spending a chunk of it working through my code! With a bit of luck I will finally have my gallery working like I want it!
I have probably spend 50 hours on this obstacle so far! More news later! Looking forward to the more advanced tutorial on "transitionend" and multiple transitions that you mentioned in your first tutorial!