加入昼夜切换的动画优化
This commit is contained in:
1 parent
1cae1da5ec
commit
2b53592adc
3 files changed
+13
-31
No files matched your search
@@ -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
|
||||
|
||||
Reference in new issue
Block a user