修复流畅性
This commit is contained in:
1 parent
28b41cbc57
commit
7f42647833
11 files changed
+175
-82
No files matched your search
@@ -1,25 +1,43 @@
|
||||
// Sheet reveal — new theme slides in, covering old theme like pulling a curtain
|
||||
function themeSweep(newTheme, callback) {
|
||||
var isH = Math.random() < 0.5;
|
||||
var veil = document.createElement('div');
|
||||
var gradient = newTheme === 'dark'
|
||||
? 'linear-gradient(135deg,rgba(2,6,23,0.18),rgba(15,23,42,0.55) 45%,rgba(30,41,59,0.36))'
|
||||
: 'linear-gradient(135deg,rgba(255,247,237,0.28),rgba(252,250,245,0.62) 45%,rgba(254,243,199,0.32))';
|
||||
|
||||
var blank = newTheme === 'dark' ? '#111827' : '#fcfaf5';
|
||||
var sheet = document.createElement('div');
|
||||
sheet.style.cssText =
|
||||
'position:fixed;inset:0;z-index:9999;' +
|
||||
'background:' + blank + ';' +
|
||||
'clip-path:inset(0 0 0 0);' +
|
||||
'transition:clip-path 1.2s cubic-bezier(0.4,0,0.2,1);' +
|
||||
'will-change:clip-path;';
|
||||
document.body.appendChild(sheet);
|
||||
veil.style.cssText =
|
||||
'position:fixed;inset:0;z-index:9999;pointer-events:none;' +
|
||||
'background:' + gradient + ';' +
|
||||
'opacity:0;transition:opacity 0.42s cubic-bezier(0.22,0.61,0.36,1);' +
|
||||
'will-change:opacity;contain:paint;';
|
||||
document.body.appendChild(veil);
|
||||
|
||||
sheet.offsetWidth;
|
||||
callback();
|
||||
var cleaned = false;
|
||||
function cleanup() {
|
||||
if (cleaned) return;
|
||||
cleaned = true;
|
||||
if (veil.parentNode) veil.parentNode.removeChild(veil);
|
||||
}
|
||||
|
||||
sheet.style.clipPath = isH ? 'inset(0 0 0 100%)' : 'inset(100% 0 0 0)';
|
||||
var applied = false;
|
||||
function applyTheme() {
|
||||
if (applied) return;
|
||||
applied = true;
|
||||
callback();
|
||||
veil.style.opacity = '0';
|
||||
}
|
||||
|
||||
sheet.addEventListener('transitionend', function() {
|
||||
if (sheet.parentNode) sheet.parentNode.removeChild(sheet);
|
||||
veil.offsetWidth;
|
||||
veil.style.opacity = '1';
|
||||
|
||||
setTimeout(applyTheme, 300);
|
||||
veil.addEventListener('transitionend', function(e) {
|
||||
if (!applied || e.propertyName !== 'opacity') return;
|
||||
cleanup();
|
||||
});
|
||||
setTimeout(function() {
|
||||
applyTheme();
|
||||
cleanup();
|
||||
}, 950);
|
||||
}
|
||||
|
||||
// Toast Message Helper
|
||||
|
||||
Reference in new issue
Block a user