JavaScript暗模式正在影响我的AOS

Question

你好，这里是新手。

因此，我正在我的投资组合网站(本地(上工作，并添加了AOS(https://michalsnik.github.io/aos/)和暗模式(https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8)在我的脚本中。

在添加暗模式之前，动画卷轴工作正常。

在我添加了暗模式后，我的网站在第一次加载或刷新时不再自动为渐变设置动画。

Ex。当加载/刷新网站时，会显示"我的个人简介"部分；当它应该被隐藏时，只有当滚动到时才会淡入。

我该如何解决这个问题？(如果没有解决方案，我只能忍受这个小错误lmao(

h2标签上的淡入淡出示例：

<div data-aos="fade-right" data-aos-duration="1000" data-aos-easing="ease-in-out"
data-aos-mirror="true" data-aos-once="false" class="aos-init aos-animate">
<h2>About Me</h2>
</div>

我的JavaScript文件：

document.addEventListener("DOMContentLoaded", function() {
setTimeout(function() { AOS.refresh(); }, 500);
});
// Dark Mode Switcher
// Source: https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8
var toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') {
toggleSwitch.checked = true;
}
}
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
}
else {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
}
}
window.addEventListener('load', AOS.refresh)
toggleSwitch.addEventListener('change', switchTheme, false);

Answer 1

这是AOS的一个常见问题，当你第一次加载网站时，它可能发生在css更改之后，在你的情况下，当你触发黑暗模式时。

尝试在使用window.location.reload()更改为暗模式后强制重新加载页面

function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
window.location.reload()
}
else {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
window.location.reload()
}
}

Answer 2

如果您使用任何类型的开关，请尝试，

<DarkModeSwitch
className={darkMode ? 'dark__icon' : 'light__icon'}
checked={darkMode}
onClick={() => toggleTheme() + window.location.reload()}
/>