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

smooth clock wraparound

Browse Source
This commit is contained in:
Kiyomichi Kosaka 2025-06-15 01:05:05 +02:00
parent acbf7562ee
commit fc0eba7cc7
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); const el = document.getElementById(id);
if (!el) return; if (!el) return;
const prev = lastAngles[id]; const prev = lastAngles[id];
if (angle < prev) { if (angle < prev) {
// Disable transition for wrap-around jumps // When wrapping around (e.g. 15 → 0), animate to one full turn
el.style.transition = 'none'; // and then snap back to the new angle to avoid a jump.
el.style.transform = `rotate(${angle}deg)`; const target = angle + 360;
// Force reflow so the style takes effect immediately const handle = () => {
void el.offsetWidth; el.removeEventListener('transitionend', handle);
el.style.transition = ''; // 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 { } else {
el.style.transform = `rotate(${angle}deg)`; el.style.transform = `rotate(${angle}deg)`;
} }
lastAngles[id] = angle; lastAngles[id] = angle;
} }