如何在JavaScript中为明暗模式切换添加过渡动画

要实现1秒ease-in的过渡效果，核心是用CSS的transition属性控制样式变化的动画，同时用类切换的方式管理明暗模式，比直接操作style更清晰易维护。

第一步：添加CSS过渡与模式类 #

给.container元素设置过渡属性，同时定义明暗模式对应的样式类：

.container {
  /* 保留你原本的其他样式 */
  transition: background-color 1s ease-in, color 1s ease-in;
}

/* 浅色模式样式 */
.container.light-mode {
  background-color: white;
  color: black;
}

/* 深色模式样式 */
.container.dark-mode {
  background-color: black;
  color: white;
}

第二步：修改JavaScript逻辑 #

不再直接修改元素的style，而是通过添加/移除类来切换模式：

const container = document.querySelector(".container");
const lightBtn = document.getElementById("light");
const darkBtn = document.getElementById("dark");

lightBtn.addEventListener('click', () => {
  container.classList.remove('dark-mode');
  container.classList.add('light-mode');
});

darkBtn.addEventListener('click', () => {
  container.classList.remove('light-mode');
  container.classList.add('dark-mode');
});

补充说明 #

• 若你的页面默认是浅色模式，可以直接在HTML的.container标签上预先加上light-mode类，初始化时就应用浅色样式；反之则加dark-mode。
• 用类管理样式的好处是样式逻辑完全分离到CSS中，后续要调整过渡时长、缓动函数或颜色值，直接修改CSS即可，无需改动JavaScript代码。

内容的提问来源于stack exchange，提问作者Ali Raza