CSS过渡效果失效排查：暗黑模式背景渐变无法正常过渡

问题核心：CSS 的 transition 属性无法直接对**渐变背景（radial-gradient/linear-gradient）**生效——因为渐变属于 background-image 类型，而 transition 仅支持对可计算的数值型属性（如 opacity、background-color、transform 等）做过渡动画。

你可以通过伪元素叠加+opacity 过渡的方式绕开这个限制，实现渐变背景的平滑切换，具体修改如下：

修改后的 CSS 代码 #

body {
  position: relative;
  min-height: 100vh; /* 确保背景覆盖整个视口 */
  margin: 0; /* 清除默认边距 */
}

/* 亮色背景伪元素 */
body::before,
/* 暗色背景伪元素 */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s ease-in-out;
  z-index: -1; /* 将背景置于内容下方，避免遮挡 */
}

body::before {
  background: radial-gradient(circle, rgba(235,128,40,1) 0%, rgba(176,28,19,1) 100%);
  opacity: 1; /* 默认显示亮色背景 */
}

body::after {
  background: radial-gradient(circle, rgba(79,64,129,1) 0%, rgba(44,27,101,1) 100%);
  opacity: 0; /* 默认隐藏暗色背景 */
}

/* 切换暗黑模式时，交换两个伪元素的透明度 */
body.dark-mode::before {
  opacity: 0;
}

body.dark-mode::after {
  opacity: 1;
}

JavaScript 代码无需修改 #

你的类切换逻辑完全正常，保留原代码即可：

function toggleDarkMode(buttonId, logoId) {
    var button = document.getElementById(buttonId);
    var logo = document.getElementById(logoId);

    if(document.body.classList.contains("dark-mode")) {
        document.body.classList.remove("dark-mode");
        logo.src="{{ asset('build/images/pokemons/koraidon-detail-2x.png') }}";
    } else {
        document.body.classList.add("dark-mode");
        logo.src="{{ asset('build/images/pokemons/miraidon-detail-2x.png') }}";
    }
}

document.getElementById("darkModeButton").addEventListener("click", function(){
    toggleDarkMode('darkModeButton', 'logo')
});

原理说明：

• 用两个固定定位的伪元素分别承载亮色、暗色渐变背景，默认仅显示其中一个
• 切换 dark-mode 类时，通过修改伪元素的 opacity 值实现平滑过渡（opacity 是支持 transition 的属性）
• 伪元素设置 z-index: -1，确保不会遮挡页面内的其他内容

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