`pswp--zoomed-in` should be added immediately if zooming

Hi there, first I must say again how much I love this library!! Congrats on the new major version 🎉

Today I migrated one of my projects from v4 to v5 and I noticed that the class pswp--zoomed-in is not being added before the zoom-animation finishes. This used to be different in v4, where the class was being added immediately after clicking an image. I rely on this class to hide a custom element that I render as an overlay for my images.

As a side note: While looking through the related code, I noticed this line:

el.classList[isZoomedIn ? 'add' : 'remove']('pswp--zoomed-in');

Is there a reason you are not using classList.toggle here? Seems like the perfect use case 😃 The above could be refactored like this:

el.classList.toggle('pswp--zoomed-in', isZoomedIn);

[dimsemenov]

The v4 was changing class directly in zoomTo method, while the new one is based on the actual zoom value in API. Since zoomTo uses CSS animations, you can’t reliably get zoom value mid-transition, so it updates when the animation ends.

I like your solution though, should probably be merged, unless we find some issue with it.

Is there a reason you are not using classList.toggle here? Seems like the perfect use case 😃

Think it just was ported from some older code that had different browser support, should be changed as well.

[hirasso]

Sorry, I over-estimated my available time and will not be able to contribute to the code base in the near future. Just thought I would give you a short notice, instead of just ghosting 👻