angel/campus-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #646 from ContriFork/fix/theme-toggle-flickering

Browse Source 
Fix flickering when toggling theme #643
This commit is contained in:
André B
2025-08-18 23:41:08 -04:00
committed by GitHub
parent 2e8f6ec459 c63cf4371f
commit ed3cc87a41
1 changed files with 22 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/common/BasicScripts.astro
View File

@@ -68,6 +68,9 @@ import { UI } from 'astrowind:config';
if (defaultTheme.endsWith(':only')) { if (defaultTheme.endsWith(':only')) {
return; return;
} }
Observer.removeAnimationDelay();
document.documentElement.classList.toggle('dark'); document.documentElement.classList.toggle('dark');
localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light'; localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
}); });
@@ -167,6 +170,7 @@ import { UI } from 'astrowind:config';
observer: null, observer: null,
delayBetweenAnimations: 100, delayBetweenAnimations: 100,
animationCounter: 0, animationCounter: 0,
elements: null,
start() { start() {
const selectors = [ const selectors = [
@@ -179,7 +183,7 @@ import { UI } from 'astrowind:config';
'[class$=" intersect"]', '[class$=" intersect"]',
]; ];
const elements = Array.from(document.querySelectorAll(selectors.join(','))); this.elements = Array.from(document.querySelectorAll(selectors.join(',')));
const getThreshold = (element) => { const getThreshold = (element) => {
if (element.classList.contains('intersect-full')) return 0.99; if (element.classList.contains('intersect-full')) return 0.99;
@@ -188,7 +192,7 @@ import { UI } from 'astrowind:config';
return 0; return 0;
}; };
elements.forEach((el) => { this.elements.forEach((el) => {
el.setAttribute('no-intersect', ''); el.setAttribute('no-intersect', '');
el._intersectionThreshold = getThreshold(el); 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] }); 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); 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(); Observer.start();