hola, novato aquí.
Así que estoy trabajando en el sitio web de mi cartera (local) y agregué AOS ( https://michalsnik.github.io/aos/ ) y un modo oscuro ( https://dev.to/ananyaneogi/create-a -dark-light-mode-switch-with-css-variables-34l8 ) en mis scripts.
Antes de agregar el modo oscuro, los pergaminos animados funcionaban.
Después de agregar el modo oscuro, mi sitio web ya no anima los fundidos automáticamente cuando se carga por primera vez o cuando se actualiza.
Ex. La sección Mi Acerca de mí se muestra cuando el sitio se carga/actualiza; cuando debería haber estado oculto y solo se desvanece cuando se desplaza hacia adentro.
¿Cómo puedo solucionar esto? (si no hay solución, puedo vivir con este error menor, lmao)
Ejemplo del desvanecimiento en la etiqueta 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>Mi archivo 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);Es un problema común de AOS, cuando carga un sitio web por primera vez, puede ocurrir después de un cambio en CSS, en su caso, cuando activa el modo oscuro.
intente forzar la recarga de la página después de cambiar al modo oscuro con 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() } }