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

Question

我通过链接https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8为我的网页创建了一个暗模式 我想添加一个动画效果，以便当应用深色模式时，过渡是平滑的。我该怎么做？我知道 CSS 关键帧用于添加动画，或者可以使用 jQuery，但我似乎不知道如何使用它们。

Answer 1

您可以使用css 过渡。下面是一个简单的例子，点击代码片段来转换背景颜色：

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;

}