加入昼夜切换的动画优化

This commit is contained in:
Vaica committed 2026-06-02 15:49:17 +08:00
1 parent 1cae1da5ec
commit 2b53592adc
3 files changed
+13 -31

No files matched your search

+11 -29
View File
@@ -1,41 +1,23 @@
function themeSweep(newTheme, callback) {
// View Transition API — browser-native crossfade, zero JS animation overhead.
// Same principle as image lightbox transitions. Chrome/Edge 111+, Opera 97+.
// View Transition API — best quality if available
if (document.startViewTransition) {
document.startViewTransition(function() { callback(); });
return;
}
// Fallback: lightweight overlay for Safari / Firefox
var oldTheme = document.documentElement.getAttribute('data-theme');
var tint = oldTheme === 'dark'
? 'rgba(15,23,42,0.95)'
: 'rgba(255,255,255,0.95)';
var overlay = document.createElement('div');
overlay.style.cssText =
'position:fixed;inset:0;z-index:9999;pointer-events:none;' +
'background:' + tint + ';opacity:1;' +
'transition:opacity 0.22s ease;' +
'will-change:opacity;contain:paint;';
document.body.appendChild(overlay);
var cleaned = false;
function cleanup() {
if (cleaned) return;
cleaned = true;
if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
// UIkit animate fallback
if (window.UIkit && UIkit.animate) {
var body = document.body;
UIkit.animate(body, 'uk-animation-fade uk-animation-fast');
setTimeout(function() {
callback();
UIkit.animate(body, 'uk-animation-fade uk-animation-fast');
}, 150);
return;
}
// Last resort: simple opacity
callback();
overlay.offsetWidth;
overlay.style.opacity = '0';
overlay.addEventListener('transitionend', function(e) {
if (e.propertyName !== 'opacity') return;
cleanup();
});
setTimeout(cleanup, 380);
}
// Toast Message Helper