CN-JS-HuiBai/PromdataPanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

修复动画错误问题

Browse Source
This commit is contained in:
CN-JS-HuiBai
2026-04-06 02:32:24 +08:00
parent 61748b8959
commit 90b31f9926
2 changed files with 59 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
public/js/app.js
View File

@@ -213,18 +213,22 @@
function expandGlobe() {
if (dom.globeCard.classList.contains('expanded')) return;
// FLIP Step 1 — First: save original rect
// Save original rect for FLIP
savedGlobeRect = dom.globeCard.getBoundingClientRect();
// FLIP Step 2 — Last: apply expanded state
dom.globeCard.classList.add('expanded');
dom.btnExpandGlobe.classList.add('active');
// Update button icon/title
dom.btnExpandGlobe.title = '缩小显示';
dom.btnExpandGlobe.innerHTML = `
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 18px; height: 18px;">
<path d="M4 14h6v6M20 10h-6V4M14 10l7-7M10 14l-7 7" />
</svg>
`;
// Resize ECharts IMMEDIATELY so the map renders at full size
// This prevents the "flash" — content is correctly sized throughout
if (myMap2D) myMap2D.resize();
// FLIP Step 3 — Invert: calculate and apply inverse transform
const endRect = dom.globeCard.getBoundingClientRect();
const scaleX = savedGlobeRect.width / endRect.width;
const scaleY = savedGlobeRect.height / endRect.height;
@@ -236,36 +240,51 @@
dom.globeCard.style.transform = `translate(${dx}px, ${dy}px) scale(${scaleX}, ${scaleY})`;
dom.globeCard.style.boxShadow = '0 0 0 0 transparent, 0 0 0 0 transparent';
// Force reflow to commit the inverse state
dom.globeCard.offsetHeight;
dom.globeCard.offsetHeight; // Force reflow
// FLIP Step 4 — Play: animate to final state
dom.globeCard.style.transition = 'transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease';
dom.globeCard.style.transform = '';
dom.globeCard.style.boxShadow = '';
dom.globeCard.addEventListener('transitionend', function onEnd(e) {
const onTransitionEnd = (e) => {
if (e.propertyName !== 'transform') return;
dom.globeCard.removeEventListener('transitionend', onEnd);
dom.globeCard.removeEventListener('transitionend', onTransitionEnd);
dom.globeCard.style.transition = '';
dom.globeCard.style.willChange = '';
});
};
dom.globeCard.addEventListener('transitionend', onTransitionEnd);
}
function collapseGlobe() {
if (!dom.globeCard.classList.contains('expanded')) return;
if (dom.globeCard.classList.contains('globe-collapsing')) return;
if (!savedGlobeRect) {
dom.globeCard.classList.remove('expanded');
const resetState = () => {
dom.globeCard.classList.remove('expanded', 'globe-collapsing');
dom.btnExpandGlobe.classList.remove('active');
dom.globeCard.style.transition = '';
dom.globeCard.style.transform = '';
dom.globeCard.style.boxShadow = '';
dom.globeCard.style.willChange = '';
// Restore button icon/title
dom.btnExpandGlobe.title = '放大显示';
dom.btnExpandGlobe.innerHTML = `
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 18px; height: 18px;">
<path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" />
</svg>
`;
if (myMap2D) requestAnimationFrame(() => myMap2D.resize());
};
if (!savedGlobeRect) {
resetState();
return;
}
dom.globeCard.classList.add('globe-collapsing');
// Calculate transform from expanded back to original position
const expandedRect = dom.globeCard.getBoundingClientRect();
const scaleX = savedGlobeRect.width / expandedRect.width;
const scaleY = savedGlobeRect.height / expandedRect.height;
@@ -274,20 +293,29 @@
dom.globeCard.style.willChange = 'transform, box-shadow';
dom.globeCard.style.transition = 'transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease';
dom.globeCard.style.transform = `translate(${dx}px, ${dy}px) scale(${scaleX}, ${scaleY})`;
dom.globeCard.style.boxShadow = '0 0 0 0 transparent, 0 0 0 0 transparent';
dom.globeCard.addEventListener('transitionend', function onEnd(e) {
if (e.propertyName !== 'transform') return;
dom.globeCard.removeEventListener('transitionend', onEnd);
dom.globeCard.classList.remove('expanded', 'globe-collapsing');
dom.btnExpandGlobe.classList.remove('active');
dom.globeCard.style.transition = '';
dom.globeCard.style.transform = '';
dom.globeCard.style.boxShadow = '';
dom.globeCard.style.willChange = '';
if (myMap2D) requestAnimationFrame(() => myMap2D.resize());
// Force change to ensure transition fires
requestAnimationFrame(() => {
dom.globeCard.style.transform = `translate(${dx}px, ${dy}px) scale(${scaleX}, ${scaleY})`;
dom.globeCard.style.boxShadow = '0 0 0 0 transparent, 0 0 0 0 transparent';
});
let transitionFinished = false;
const onTransitionEnd = (e) => {
if (e.propertyName !== 'transform') return;
transitionFinished = true;
dom.globeCard.removeEventListener('transitionend', onTransitionEnd);
resetState();
};
dom.globeCard.addEventListener('transitionend', onTransitionEnd);
// Robustness fallback (400ms > 350ms transition)
setTimeout(() => {
if (!transitionFinished) {
dom.globeCard.removeEventListener('transitionend', onTransitionEnd);
resetState();
}
}, 500);
}
if (dom.btnExpandGlobe) {