Можем ли мы ограничить анимацию ключевых кадров CSS областью действия
Интересно, можно ли ограничить анимацию ключевых кадров областью, основанной на именах классов. Преимущество заключается в возможности использовать одно и то же имя анимации несколько раз без проблем. Я не мог найти никакой информации об этом ..
Если это невозможно: есть ли какие-либо передовые методы разрешения конфликтов имен?
Это интересный способ решения проблем с именованием - просто сделал тестовую реализацию, и она отлично сработала. Пытаясь следовать структуре itcss, я надеялся найти способ поместить все анимации в дополнительный файл scss. Это было бы невозможно, но большое спасибо за ваше предложение. Придется подумать о том, чтобы пойти по этому пути :)
@somethinghere похоже, что определение объема, как я хотел бы, невозможно. Хотели бы вы переписать свой комментарий как ответ и предоставить полный короткий пример? Кстати, при увеличении $ animation-id-count внутри функции мне нужен! Global в конце строки, иначе каждый вызов возвращает то же (начальное) значение. Дайте мне знать, если вы хотите задать ответ - в противном случае я мог бы добавить ответ с примером кода. Но, конечно, вы должны получить признание!
Я добавил это как ответ. Я думал об этом и предполагаю, что если бы вы могли найти способ отслеживать пространства имен, вы могли бы использовать функцию, чтобы выяснить, какое имя анимации возвращать, так что это начало. Кроме того, хорошее упоминание о !global, я использовал !default, но это действительно неправильно.
Ответы 1
Раньше я использовал что-то вроде SCSS для создания автоматически созданных имен для моих ключевых кадров. Они могут быть не такими наглядными, но гарантируют уникальность. Что-то вроде:
$animation-id-count: 0 !global;
@function animation-id {
$animation-id-count: $animation-id-count + 1;
@return animation-id-#{$animation-id-count};
}
После этого просто используйте функцию в своем коде следующим образом:
.class {
$id: animation-id();
@keyframes #{$id}{
...keyframes
}
animation: $id 1s infinite;
}
Таким образом, если вы вставите его в другое место в SCSS или переместите, он по-прежнему будет соответствовать правильной анимации и не позволит пространствам имен каким-либо образом перекрываться.
Спасибо за ответ!
Это не отвечает на вопрос
@zaqx «Если это невозможно: есть ли какие-нибудь передовые методы разрешения конфликтов имен?» - это невозможно, поэтому вот как избежать конфликтов имен. Отвечает на вопрос.
@somethinghere «Можно ли ограничить анимацию ключевых кадров CSS областью действия» - верх страницы в большом тексте. Это даже в URL.
Раньше я использовал что-то вроде SCSS для создания автоматически созданных имен для моих ключевых кадров. Они могут быть не такими наглядными, но гарантируют уникальность. Что-то вроде
$animation-id-count: 0 !default; @function animation-id{ $animation-id-count: $animation-id-count + 1; @return animation-id-#{$animation-id-count}; }, а потом просто используйте как.class { $id: animation-id(); @keyframes #{$id}{ ...keyframes } }; animation: $id 1s infinite;. Таким образом, если вы вставите его в другое место в SCSS или переместите, он все равно будет соответствовать правильной анимации.