javascript - 在切换到深色模式 HTML 时添加动画
问题描述
我通过链接https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8为我的网页创建了一个暗模式 我想添加一个动画效果,以便当应用暗模式时,过渡是平滑的。我该怎么做?
我知道 CSS 关键帧用于添加动画,或者可以使用 jQuery,但我似乎不知道如何使用它们。
解决方案
您可以使用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;
}
推荐阅读
- firebase - FCM ID vs FCM 令牌 vs APNS 令牌
- javascript - Chrome 中的 SyntaxError 但节点中的 ReferenceError
- android - 从 JobScheduler 的 onStartJob() 使用 Retrofit 进行 API 调用
- mongodb - 如何在mongodb的字段中插入元数据
- sql-server - 寻找动态存储过程,用于多个查询
- google-apps-script - Google Chat API:从机器人中删除消息会出现 401 错误
- python - 使用 Select Widget 问题更新绘图
- oauth-2.0 - BotFramework 通过 OAuth 2.0 与 PingFederate 集成?
- ruby - 如何让 CocoaPods 使用最新的 ruby 版本?
- python - 我对带有 Python Selenium 的 Instagram 之类的机器人有疑问