css - SWUP 更改 CSS 文件和动画淡入效果 (HeadPlugin)

Question

嗨，我遇到了 HeadPlugin 如何影响动画的问题，并确定了一个解决方法，并认为我会在这里发布它，以防万一有人遇到同样的问题。此外，所有这些都可能被误导，我可能会遗漏一些东西，所以请告诉我。

场景：

假设我们想为网站上的不同页面使用不同的样式表，那么我们可以使用 HeadPlugin 来做到这一点。

问题：

更改样式表时，淡出动画将起作用，但淡入动画将不起作用。（注意：如果样式表中的元素在淡入动画之间转换的两个页面中具有相同的名称，则有时会起作用，具体取决于元素和动画。）

一个解法：

创建一个单独的样式表，定义所有页面之间的所有动画并将其包含在每个 html 页面中。然后为各个页面的其余样式或您认为合适的样式创建一个单独的样式表。这样，您仍然可以在页面之间以不同的方式对共享相同 ids/classes 的其余元素进行样式设置。（缺点：包含所有动画的样式表的初始加载时间，但是这个文件应该是延迟加载的：D）

另一个解决方案（我不喜欢）：

有一个大样式表，其中包含每个页面中所有元素的样式（当然不包括内联 CSS）。（缺点1：包含所有动画和其他样式的样式表的初始加载时间，此文件不应延迟加载，除非您将动画 CSS 和非动画 CSS 拆分为单独的文件。在这种情况下，只是您的样式的初始加载时间文件，除非所有关键样式都内联完成，在这种情况下，您可以延迟加载这两个文件 XD。）（缺点2：除非使用内联 CSS 来定义差异，否则不能在不同页面上共享相同的 ids/classes 的元素。）

潜在的解决方案？（没试过）：

使用内联 CSS 来定义动画 O_O，idk 如果这甚至可能但可能不是一个好主意。

如果有人需要，我可以发布一些示例来演示问题等。

如果有更好的方法，请告诉我，否则希望这有助于 OwO。

标签： cssweb-deploymentswuppage-transition