在夜间模式按钮上轻松转换

Question

我有一个简单的 JavaScript 亮/暗模式按钮，但我不知道如何使过渡变得轻松和轻松。这是 CSS：

.night-mode {
background-color:#2a2d30;
color:white;
transition:0.4s ease-in-out;

}

这是 JS 和 HTML：

<button onclick="night()">night mode</button>

<script>
function night() {
   var element = document.body;
   element.classList.toggle("night-mode");
}
</script>```

Answer 1

问题是您将转换放在您正在设置/删除的 class 中，它应该独立于它。

如果您只是更改 body 元素，我会做的是将过渡设置为：

body {
  transition: color .4s ease-in-out, background-color .4s ease-in-out;
  /* set the light colors here if needed */
}

.night-mode {
  background-color:#2a2d30;
  color:white;
}

请注意，在上面的代码中，我没有为每个属性设置过渡，而只是为那些我们真正想要动画的属性设置过渡。

当然，如果您希望 animation 不仅适用于主体，而且适用于特定元素（例如，您的 UI 的某些部分需要保持不变，例如链接不继承颜色），我将创建一个实用程序 class，例如：

   .with-colors-transition {
      transition: color .4s ease-in-out, background-color .4s ease-in-out;
      /* set the light colors here if needed */
   }

并将其应用于您要添加/删除夜间模式的所有元素

Answer 2

如果添加另一个名为dark-mode-off class ，则可以执行此操作。 然后，将主体 class 设置为该值。 在 JS 中，添加一个全局变量来检查暗模式是打开还是关闭。 根据这一点，用另一个替换当前的 class。

 var darkmodeon = false; function night() { var element = document.body; if (darkmodeon) { element.classList.replace("night-mode-on", "night-mode-off"); } else { element.classList.replace("night-mode-off", "night-mode-on"); } darkmodeon =;darkmodeon; }

 .night-mode-on { background-color: #2a2d30; color: white; transition: 0.4s ease-in-out; }.night-mode-off { background-color: #fff; color: black; transition: 0.4s ease-in-out; }

 <body class="night-mode-off"> <button onclick="night()">night mode</button> </body>

为避免冗长的 if 语句，您可以将其设为一行：

element.classList.replace(darkemodeon ? "night-mode-on" : "night-mode-off", darkemodeon ? "night-mode-off" : "night-mode-on");

在夜间模式按钮上轻松转换

问题描述

2 个解决方案

解决方案1
2 2020-12-15 14:51:46

解决方案2
1 已采纳 2020-12-15 00:29:13

在夜间模式按钮上轻松转换

问题描述

2 个解决方案

解决方案1 2 2020-12-15 14:51:46

解决方案2 1 已采纳 2020-12-15 00:29:13

解决方案1
2 2020-12-15 14:51:46

解决方案2
1 已采纳 2020-12-15 00:29:13