Head plugin effecting fade in transitions

[OwO-justaweeb]

Hi thanks for making this awesome library, I encountered a problem with how the HeadPlugin is effecting animations and determined a work around and thought I'd post it here, in-case anybody is running into the same issue and also to notify you guys if you weren't aware of this. Also all of this may be misinformed and I might be missing something so please let me know.

The Scenario:
Let us say we want to use different stylesheets for different pages on our site, then we can use the HeadPlugin to do so.

The Problem:
When changing stylesheets the fade out animation will work but the fade in animation will not work.
(note: if the elements within the stylesheet have the same name in the two pages being transitioned between the fade in animation will work some of the time, depending on the element and the animation.)

A Solution:
To create a separate stylesheet defining all the animations between all your pages and include it in every html page. Then have a separate stylesheet for the rest of the styling for the individual pages or as you see fit. This way you can still style the rest of your elements sharing the same ids/classes differently between pages.
(Drawback: initial load time of the stylesheet containing all the animations, but this file should be lazy loaded :D)

Another Solution (me no like) :
Have one big stylesheet with the styles for all the elements in every page (excluding the inline CSS of course).
(Drawback1: initial load time of the stylesheet containing all the animations and other styles, this file should not be lazy loaded, unless you split the animation CSS and non animation CSS into separate files. In which case just the initial load time of your style file, unless all the critical styles are done inline in which case you could lazy load both files XD.)
(Drawback2: can't have elements sharing the same ids/classes on different pages unless using inline CSS to define the differences.)

Potential solution? (haven't tried):
Using inline CSS to define the animations O_O, idk if this is even possible but probably not a good idea.

I can post some examples demonstrating the problems etc if anybody needs.

If there is a belter way then pls let me know, otherwise hope this helps OwO.

[daun]

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.

[gmrchk]

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. 🎉