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

0

Browse Source
This commit is contained in:
CN-JS-HuiBai
2026-04-06 02:34:27 +08:00
parent 90b31f9926
commit d0bc646c22
1 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
public/js/app.js
View File

@@ -243,7 +243,8 @@
dom.globeCard.offsetHeight; // Force reflow dom.globeCard.offsetHeight; // Force reflow
dom.globeCard.style.transition = 'transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease'; dom.globeCard.style.transition = 'transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease';
dom.globeCard.style.transform = ''; // Use explicit values instead of empty string for better transition reliability
dom.globeCard.style.transform = 'translate(0px, 0px) scale(1)';
dom.globeCard.style.boxShadow = ''; dom.globeCard.style.boxShadow = '';
const onTransitionEnd = (e) => { const onTransitionEnd = (e) => {
@@ -291,14 +292,16 @@
const dx = (savedGlobeRect.left + savedGlobeRect.width / 2) - (expandedRect.left + expandedRect.width / 2); const dx = (savedGlobeRect.left + savedGlobeRect.width / 2) - (expandedRect.left + expandedRect.width / 2);
const dy = (savedGlobeRect.top + savedGlobeRect.height / 2) - (expandedRect.top + expandedRect.height / 2); const dy = (savedGlobeRect.top + savedGlobeRect.height / 2) - (expandedRect.top + expandedRect.height / 2);
// Ensure we are at a known state before starting transition
dom.globeCard.style.transform = 'translate(0px, 0px) scale(1)';
dom.globeCard.offsetHeight; // Force reflow
dom.globeCard.style.willChange = 'transform, box-shadow'; 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.transition = 'transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease';
// Force change to ensure transition fires // Apply target values
requestAnimationFrame(() => { dom.globeCard.style.transform = `translate(${dx}px, ${dy}px) scale(${scaleX}, ${scaleY})`;
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.style.boxShadow = '0 0 0 0 transparent, 0 0 0 0 transparent';
});
let transitionFinished = false; let transitionFinished = false;
const onTransitionEnd = (e) => { const onTransitionEnd = (e) => {
@@ -309,7 +312,7 @@
}; };
dom.globeCard.addEventListener('transitionend', onTransitionEnd); dom.globeCard.addEventListener('transitionend', onTransitionEnd);
// Robustness fallback (400ms > 350ms transition) // Robustness fallback
setTimeout(() => { setTimeout(() => {
if (!transitionFinished) { if (!transitionFinished) {
dom.globeCard.removeEventListener('transitionend', onTransitionEnd); dom.globeCard.removeEventListener('transitionend', onTransitionEnd);