优化动画
This commit is contained in:
@@ -208,15 +208,34 @@
|
||||
}
|
||||
|
||||
// Globe expansion
|
||||
function expandGlobe() {
|
||||
if (dom.globeCard.classList.contains('expanded')) return;
|
||||
dom.globeCard.classList.add('expanded');
|
||||
dom.btnExpandGlobe.classList.add('active');
|
||||
dom.globeCard.addEventListener('animationend', function onExpand() {
|
||||
dom.globeCard.removeEventListener('animationend', onExpand);
|
||||
if (myMap2D) myMap2D.resize();
|
||||
});
|
||||
}
|
||||
|
||||
function collapseGlobe() {
|
||||
if (!dom.globeCard.classList.contains('expanded')) return;
|
||||
if (dom.globeCard.classList.contains('globe-collapsing')) return;
|
||||
dom.globeCard.classList.add('globe-collapsing');
|
||||
dom.globeCard.addEventListener('animationend', function onCollapse() {
|
||||
dom.globeCard.removeEventListener('animationend', onCollapse);
|
||||
dom.globeCard.classList.remove('expanded', 'globe-collapsing');
|
||||
dom.btnExpandGlobe.classList.remove('active');
|
||||
if (myMap2D) requestAnimationFrame(() => myMap2D.resize());
|
||||
});
|
||||
}
|
||||
|
||||
if (dom.btnExpandGlobe) {
|
||||
dom.btnExpandGlobe.addEventListener('click', () => {
|
||||
dom.globeCard.classList.toggle('expanded');
|
||||
dom.btnExpandGlobe.classList.toggle('active');
|
||||
if (myMap2D) {
|
||||
// Single deferred resize after the DOM has applied the new layout
|
||||
requestAnimationFrame(() => {
|
||||
myMap2D.resize();
|
||||
});
|
||||
if (dom.globeCard.classList.contains('expanded')) {
|
||||
collapseGlobe();
|
||||
} else {
|
||||
expandGlobe();
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -227,11 +246,7 @@
|
||||
closeSettings();
|
||||
closeLoginModal();
|
||||
closeServerDetail();
|
||||
if (dom.globeCard && dom.globeCard.classList.contains('expanded')) {
|
||||
dom.globeCard.classList.remove('expanded');
|
||||
dom.btnExpandGlobe.classList.remove('active');
|
||||
if (myMap2D) requestAnimationFrame(() => myMap2D.resize());
|
||||
}
|
||||
collapseGlobe();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user