Используйте разные @keyframes на основе класса родительского элемента
У меня есть анимация, как показано ниже:
@keyframes pulseColorGreen {
0% {
background-color: green;
}
97%{
background-color: green;
}
100% {
background-color: white;
}
}
На моем веб-сайте также есть темный режим, в котором фон становится черным. Теперь в анимации я хочу отобразить более темный зеленый цвет, как показано ниже:
@keyframes pulseColorGreen {
0% {
background-color: darkgreen;
}
97%{
background-color: darkgreen;
}
100% {
background-color: black;
}
}
Для темного режима я добавляю класс "lightsOff" в тег body. Я управляю всеми другими изменениями цвета, используя комбинацию класса целевого элемента и класса "lightsOff", как:
.lightsOff .someclass{
color: white
}
Но при определении элемента в файле css как:
@keyframes .lightsOff pulseColorGreen {
0% {
background-color: darkgreen;
}
97%{
background-color: darkgreen;
}
100% {
background-color: black;
}
}
Это дает мне ошибку, говоря "ожидаемый идентификатор". Я динамически добавляю свойство animation-name к элементам из javascript. Следовательно, я не буду предпочитать изменять код JS, чтобы определить, какая тема установлена в данный момент, и соответственно установить ключевой кадр. Как я могу этого добиться?
Ответы 1
Вы можете использовать переменную CSS, и вам понадобится только один ключевой кадр, который вам не нужно менять. Просто измените основной класс, определяющий цвет:
.light {
--c: yellow;
}
.dark {
--c: darkblue;
}
.box {
height: 100px;
margin: 5px;
box-shadow: 0 0 5px var(--c);
color:#fff;
animation: pulseColorGreenMkt 1s infinite linear alternate;
}
@keyframes pulseColorGreenMkt {
0% {
background-color: var(--c);
}
100% {
background-color: black;
}
}<div class = "box light">
Class defined on the element
</div>
<div class = "dark">
<div class = "box">
Class defined on a parent element
</div>
</div>Я исследовал этот вариант ранее, но переменные CSS не поддерживаются в IE (поправьте меня, если ошиблись). Я хотел бы иметь кроссбраузерное решение с поддержкой браузеров как минимум 2-3-летней давности.
@KashyapKotak Ах! если вы ищете поддержку IE, я думаю, что единственный способ сделать, как вы сказали ... изменить свой JS-код, чтобы идентифицировать каждый случай
Я не тестировал свой сайт в IE. прокомментировав здесь, я открыл его в первый раз в IE и обнаружил, что многие вещи не работают: P Так что я могу покинуть IE. Но я вижу на странице caniuse.com/#feat=css-variables сообщение: «В Edge 15 анимация с переменными css может привести к сбою веб-страницы». Хотя я определенно хотел бы поддержать EDGE. Пожалуйста, дайте мне знать, если мне нужно беспокоиться о проблеме, указанной в этой ссылке
@KashyapKotak Да, эта ссылка довольно надежна, поэтому, если вы найдете что-то там, вы должны рассмотреть это, но вы также должны перейти по ссылке с ошибкой, чтобы точно знать, что это за ошибка и ее текущее состояние ... вероятно, это частный случай, когда вы не сталкиваются
Привет, Кашьяп. Я заметил, что ваши сообщения мы бы назвали "болтливыми". Это означает, что они содержат любезности и тонкости с целью просить о помощи. Здесь мы предпочитаем сообщения без этого, и иногда вы можете обнаружить, что, если читатель считает, что сообщение слишком шумное, он проголосует против и двинется дальше. Таким образом, если вы можете стремиться к краткости, мы будем признательны. Справочные обсуждения Переполнение мета-стека доступны по запросу.