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

Question

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

我知道CSS keyframe是用来添加动画的，或者也可以使用jQuery，但我似乎不知道如何使用它们。

Answer 1

你可以使用css transition。下面是一个简单的示例，在代码片段中单击以转换背景颜色：

​

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;
}

​