在切换到深色模式 HTML 时添加动画

【问题标题】：Adding Animation while switching to dark mode HTML在切换到深色模式 HTML 时添加动画
【发布时间】：2020-04-10 04:49:33
【问题描述】：

我通过链接https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8为我的网页创建了一个暗模式我想添加一个动画效果，以便在应用暗模式时，过渡是平滑的。我该怎么做？

我知道 CSS 关键帧用于添加动画，或者可以使用 jQuery，但我似乎不知道如何使用它们。

【问题讨论】：

最好在您的问题中包含相关代码，因为它使潜在的回答者更容易访问您的问题。此外，链接可能会中断。

标签： javascript jquery html css css-animations

【解决方案1】：

您可以使用css transition。下面是一个简单的例子，在sn-p中点击过渡背景色：

const rootDataset = document.documentElement.dataset;

document.onclick = () => {
    const inDarkMode = (rootDataset.theme === 'dark');
    rootDataset.theme = inDarkMode ? '' : 'dark';
}

:root {
    --primary-color: beige;    
}
[data-theme="dark"] {
    --primary-color: grey;    
}
body {
    background: var(--primary-color);
    transition: background 2s;
}

【讨论】：

看起来不错！但是在我附加的链接中，使用的方法是为根元素创建一个自定义属性，然后在单击按钮时修改它的值。那么如何在那里添加过渡呢？
@user185887 很容易适应您的用例。我更新了 sn-p 给你一些指示。