如何实现深色模式切换按钮的平滑过渡效果

核心是利用CSS的transition属性，让颜色、背景色等属性在切换类时产生平滑过渡效果，具体步骤如下：

1. 给目标元素添加过渡样式 #

在CSS中，为需要切换深色模式的元素（.one、.three、.five）添加transition属性，指定要过渡的CSS属性和过渡时长：

.one, .three, .five {
  /* 浅色模式默认样式 */
  background-color: #fff;
  color: #333;
  /* 配置过渡：监听背景色和文字颜色变化，过渡时长0.3秒，缓动效果为ease */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 深色模式样式 */
.dark-mode {
  background-color: #2d2d2d;
  color: #f0f0f0;
}

如果需要过渡其他属性（比如边框色、阴影），直接在transition里追加即可，例如：transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;

2. 简化JavaScript逻辑 #

无需在JS里判断类来设置样式，直接通过切换类名触发CSS过渡即可：

function myFunction() {
  const elements = document.querySelectorAll(".one, .three, .five");
  elements.forEach(element => {
    element.classList.toggle("dark-mode");
  });
}

原理说明：当你调用classList.toggle("dark-mode")时，元素的background-color和color会从浅色模式的值渐变到深色模式的值（反之亦然），transition属性告诉浏览器要为这些属性变化添加平滑过渡动画。

内容的提问来源于stack exchange，提问作者Hans Vos