Question

我有一个如下动画：

var buttonRef2 = document.getElementById('toggle');
buttonRef2.onclick = function () {
    var state = document.getElementById('wikiList').style.display;
    var txt = document.getElementById('toggle').textContent;
    if(state == 'none' && txt == 'show' ) {
        document.getElementById('wikiList').style.display = 'block';
        document.getElementById('toggle').textContent = 'hide';
        document.getElementById('toggle').classList.add('extraStyle');
    }else{
        document.getElementById('wikiList').style.display = 'none';
        document.getElementById('toggle').textContent = 'show';
    }
}

我的网站还具有背景为黑色的深色模式。现在在动画中，我要显示一个深绿色，如下所示：

@keyframes pulseColorGreen {
    0% {
        background-color: green;
    }
    97%{
        background-color: green;
    }
    100% {
      background-color: white;
    }
  }

对于黑暗模式，我在body标签中添加了一个“ lightsOff”类。我正在使用目标元素类和“ lightsOff”类的组合来管理所有其他颜色更改，就像：

@keyframes pulseColorGreen {
    0% {
        background-color: darkgreen;
    }
    97%{
        background-color: darkgreen;
    }
    100% {
      background-color: black;
    }
  }

但是在css文件中将元素定义为：

.lightsOff .someclass{
    color: white
}

给我一个错误，说“期望标识符”。我正在从javascript动态地将animation-name属性添加到元素。因此，我不希望更改JS代码来确定当前设置的主题并相应地设置关键帧。我该如何实现？

Answer 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>

根据父元素类使用不同的@keyframes

1 个答案: