Head plugin effecting fade in transitions about docs HOT 2 CLOSED

This is to be expected from how the HeadPlugin currently operates. It will remove any stylesheets that are not present in the upcoming page. I've created a pull request to allow persisting stylesheets across page loads which would solve this problem.

In the meantime, I'd suggest going the first route you mentioned, moving all the transitions to a global stylesheet that is loaded on every page.

from docs.

Having a single file for this kind of global styles (especially styles needed for transitions of swup) is the preferred option, so they are preserved and always exist on the page.
Including such styles (with the same or different definition) in different style files that are replaced on the page by the plugin will likely lead to swup freezing at some point, and probably not always (which is even worst tho, as you might not even know it happens).

Imo loading of styles placed into the Head by the plugin can take some time. On slower connections, you could end up with flashing ugly pages during the transitions. That being said, unless the size of your whole website CSS in one file adds significantly to the initial page load time, I would personally make that tradeoff. Also, there are ways to speed up the initial page load as well while the one bigger CSS file would be loading so that probably can be addressed separately.

As far as the styling of elements on different pages with the same classes/IDs, I would suggest to checkout BEM. Makes the styles really clean for the whole project.

Just some thoughts...

Anyway, @daun's new options were also added to the Head plugin are available in the plugin v1.1.0. 🎉

from docs.