修复bug
This commit is contained in:
1 parent
e6d50f3611
commit
3a7bddb881
1 file changed
+6
-30
@@ -1,48 +1,24 @@
|
|||||||
// Scanner — page is blanked, beam paints the new theme back line by line
|
// Sheet reveal — new theme slides in, covering old theme like pulling a curtain
|
||||||
function themeSweep(newTheme, callback) {
|
function themeSweep(newTheme, callback) {
|
||||||
var isH = Math.random() < 0.5;
|
var isH = Math.random() < 0.5;
|
||||||
var w = window.innerWidth, h = window.innerHeight;
|
|
||||||
|
|
||||||
// Blank overlay: covers entire page with new-theme's dominant color
|
|
||||||
var blank = newTheme === 'dark' ? '#111827' : '#fcfaf5';
|
var blank = newTheme === 'dark' ? '#111827' : '#fcfaf5';
|
||||||
var sheet = document.createElement('div');
|
var sheet = document.createElement('div');
|
||||||
sheet.style.cssText =
|
sheet.style.cssText =
|
||||||
'position:fixed;inset:0;z-index:9999;' +
|
'position:fixed;inset:0;z-index:9999;' +
|
||||||
'background:' + blank + ';' +
|
'background:' + blank + ';' +
|
||||||
(isH
|
'clip-path:inset(0 0 0 0);' +
|
||||||
? 'clip-path:inset(0 0 0 0);transition:clip-path 1.2s cubic-bezier(0.4,0,0.2,1);will-change:clip-path;'
|
'transition:clip-path 1.2s cubic-bezier(0.4,0,0.2,1);' +
|
||||||
: 'clip-path:inset(0 0 0 0);transition:clip-path 1.2s cubic-bezier(0.4,0,0.2,1);will-change:clip-path;');
|
'will-change:clip-path;';
|
||||||
document.body.appendChild(sheet);
|
document.body.appendChild(sheet);
|
||||||
|
|
||||||
// Thin scan beam at the leading edge
|
|
||||||
var beam = document.createElement('div');
|
|
||||||
beam.style.cssText =
|
|
||||||
'position:fixed;z-index:10000;pointer-events:none;' +
|
|
||||||
'background:rgba(255,255,255,0.7);' +
|
|
||||||
'box-shadow:0 0 4px 1px rgba(255,255,255,0.35),0 0 12px 2px rgba(255,255,255,0.12);' +
|
|
||||||
'transition:transform 1.2s cubic-bezier(0.4,0,0.2,1);will-change:transform;' +
|
|
||||||
(isH
|
|
||||||
? 'top:0;right:0;width:1px;height:100%;transform:translateX(0);'
|
|
||||||
: 'bottom:0;left:0;height:1px;width:100%;transform:translateY(0);');
|
|
||||||
|
|
||||||
document.body.appendChild(beam);
|
|
||||||
sheet.offsetWidth;
|
sheet.offsetWidth;
|
||||||
|
|
||||||
// Switch theme immediately — sheet covers it, beam reveals
|
|
||||||
callback();
|
callback();
|
||||||
|
|
||||||
if (isH) {
|
sheet.style.clipPath = isH ? 'inset(0 0 0 100%)' : 'inset(100% 0 0 0)';
|
||||||
sheet.style.clipPath = 'inset(0 0 0 100%)';
|
|
||||||
beam.style.transform = 'translateX(' + (-w) + 'px)';
|
|
||||||
} else {
|
|
||||||
sheet.style.clipPath = 'inset(100% 0 0 0)';
|
|
||||||
beam.style.transform = 'translateY(' + (-h) + 'px)';
|
|
||||||
}
|
|
||||||
|
|
||||||
beam.addEventListener('transitionend', function(e) {
|
sheet.addEventListener('transitionend', function() {
|
||||||
if (e.propertyName !== 'transform') return;
|
|
||||||
if (sheet.parentNode) sheet.parentNode.removeChild(sheet);
|
if (sheet.parentNode) sheet.parentNode.removeChild(sheet);
|
||||||
if (beam.parentNode) beam.parentNode.removeChild(beam);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user