SWUP, изменяющий файлы CSS и эффекты затухания анимации (HeadPlugin)
Привет, я столкнулся с проблемой, связанной с тем, как HeadPlugin выполняет анимацию, и решил, что нужно обойтись, и решил опубликовать его здесь, на случай, если кто-то столкнется с той же проблемой. Кроме того, все это может быть дезинформировано, и я могу что-то упустить, поэтому, пожалуйста, дайте мне знать.
Сценарий:
Допустим, мы хотим использовать разные таблицы стилей для разных страниц нашего сайта, тогда мы можем использовать HeadPlugin для этого.
Проблема:
При изменении таблиц стилей анимация постепенного исчезновения будет работать, но анимация исчезновения не будет. (примечание: если элементы в таблице стилей имеют одно и то же имя на двух страницах, которые переходят между собой, плавное появление анимации будет работать некоторое время, в зависимости от элемента и анимации.)
Решение:
Чтобы создать отдельную таблицу стилей, определяющую все анимации между всеми вашими страницами, и включить ее на каждую страницу html. Затем создайте отдельную таблицу стилей для остальных стилей для отдельных страниц или по своему усмотрению. Таким образом, вы по-прежнему можете стилизовать остальные элементы, использующие одни и те же идентификаторы / классы по-разному между страницами. (Недостаток: время начальной загрузки таблицы стилей, содержащей все анимации, но этот файл должен загружаться лениво:D)
Другое решение (мне не нравится):
Создайте одну большую таблицу стилей со стилями для всех элементов на каждой странице (за исключением, конечно, встроенного CSS). (Недостаток 1: начальное время загрузки таблицы стилей, содержащей все анимации и другие стили, этот файл не должен загружаться лениво, если вы не разделите CSS анимации и CSS без анимации на отдельные файлы. В этом случае просто начальное время загрузки вашего стиля файл, если все критические стили не выполняются встроенными, и в этом случае вы можете лениво загружать оба файла XD.) (Недостаток 2: нельзя иметь элементы, использующие одни и те же идентификаторы / классы на разных страницах, если только не используется встроенный CSS для определения различий.)
Возможное решение? (не пробовал):
Использование встроенного CSS для определения анимации O_O, idk, если это вообще возможно, но, вероятно, не лучшая идея.
Я могу опубликовать несколько примеров, демонстрирующих проблемы и т. Д., Если кому-то понадобится.
Если есть реальный способ, пожалуйста, дайте мне знать, в противном случае надеюсь, что это поможет OwO.