kaizenkodo/CoBiE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #28 from ok2/codex/fix-clock-hand-animation-at-last-second

Browse Source 
Fix analog clock hand wraparound animation
This commit is contained in:
Kiyomichi Kosaka 2025-06-15 01:05:16 +02:00 committed by GitHub
commit 6368eeb542
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
clock.js
View File

@ -49,16 +49,25 @@
const el = document.getElementById(id);
if (!el) return;
const prev = lastAngles[id];
if (angle < prev) {
// Disable transition for wrap-around jumps
el.style.transition = 'none';
el.style.transform = `rotate(${angle}deg)`;
// Force reflow so the style takes effect immediately
void el.offsetWidth;
el.style.transition = '';
// When wrapping around (e.g. 15 → 0), animate to one full turn
// and then snap back to the new angle to avoid a jump.
const target = angle + 360;
const handle = () => {
el.removeEventListener('transitionend', handle);
// Snap back without animation
el.style.transition = 'none';
el.style.transform = `rotate(${angle}deg)`;
void el.offsetWidth;
el.style.transition = '';
};
el.addEventListener('transitionend', handle, { once: true });
el.style.transform = `rotate(${target}deg)`;
} else {
el.style.transform = `rotate(${angle}deg)`;
}
lastAngles[id] = angle;
}