diff --git a/src/components/common/BasicScripts.astro b/src/components/common/BasicScripts.astro index c7290b2..8492b00 100644 --- a/src/components/common/BasicScripts.astro +++ b/src/components/common/BasicScripts.astro @@ -68,6 +68,9 @@ import { UI } from 'astrowind:config'; if (defaultTheme.endsWith(':only')) { return; } + + Observer.removeAnimationDelay(); + document.documentElement.classList.toggle('dark'); localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light'; }); @@ -167,6 +170,7 @@ import { UI } from 'astrowind:config'; observer: null, delayBetweenAnimations: 100, animationCounter: 0, + elements: null, start() { const selectors = [ @@ -179,7 +183,7 @@ import { UI } from 'astrowind:config'; '[class$=" intersect"]', ]; - const elements = Array.from(document.querySelectorAll(selectors.join(','))); + this.elements = Array.from(document.querySelectorAll(selectors.join(','))); const getThreshold = (element) => { if (element.classList.contains('intersect-full')) return 0.99; @@ -188,7 +192,7 @@ import { UI } from 'astrowind:config'; return 0; }; - elements.forEach((el) => { + this.elements.forEach((el) => { el.setAttribute('no-intersect', ''); el._intersectionThreshold = getThreshold(el); }); @@ -241,10 +245,25 @@ import { UI } from 'astrowind:config'; this.observer = new IntersectionObserver(callback.bind(this), { threshold: [0, 0.25, 0.5, 0.99] }); - elements.forEach((el) => { + this.elements.forEach((el) => { this.observer.observe(el); }); }, + + /* + REF: #643; + We need to remove the delay to fix flickering/delay + when toggling the theme. Observer only removes them + after data-animated is gone (out of view). + */ + removeAnimationDelay() { + this.elements.forEach((el) => { + if (el.getAttribute('data-animated') === 'true') { + el.style.transitionDelay = ''; + el.style.animationDelay = ''; + } + }); + }, }; Observer.start();