84 lines
2.5 KiB
JavaScript
84 lines
2.5 KiB
JavaScript
(function(){
|
|
const lastAngles = {
|
|
handXeno: 0,
|
|
handQuantic: 0,
|
|
handChronon: 0,
|
|
handEonstrip: 0,
|
|
handMegasequence: 0
|
|
};
|
|
|
|
function rotateHand(id, angle) {
|
|
const el = document.getElementById(id);
|
|
if (!el) return;
|
|
const prev = lastAngles[id];
|
|
|
|
if (angle < prev) {
|
|
const target = angle + 360;
|
|
const handle = () => {
|
|
el.removeEventListener('transitionend', handle);
|
|
el.style.transition = 'none';
|
|
el.style.transform = `translateX(-50%) translateZ(0) rotate(${angle}deg)`;
|
|
void el.offsetWidth;
|
|
el.style.transition = '';
|
|
};
|
|
el.addEventListener('transitionend', handle, { once: true });
|
|
el.style.transform = `translateX(-50%) translateZ(0) rotate(${target}deg)`;
|
|
} else {
|
|
el.style.transform = `translateX(-50%) translateZ(0) rotate(${angle}deg)`;
|
|
}
|
|
lastAngles[id] = angle;
|
|
}
|
|
|
|
function animateSwipe(direction, onDone) {
|
|
const grid = document.getElementById('eonstripGrid');
|
|
if (!grid) { onDone(); return; }
|
|
|
|
grid.style.transition = 'none';
|
|
grid.style.transform = 'translateX(0)';
|
|
void grid.offsetWidth;
|
|
|
|
grid.style.transition = 'transform 0.3s ease';
|
|
grid.style.transform = `translateX(${direction > 0 ? '-100%' : '100%'})`;
|
|
|
|
function afterOut() {
|
|
grid.removeEventListener('transitionend', afterOut);
|
|
grid.style.transition = 'none';
|
|
grid.style.transform = `translateX(${direction > 0 ? '100%' : '-100%'})`;
|
|
onDone();
|
|
void grid.offsetWidth;
|
|
grid.style.transition = 'transform 0.3s ease';
|
|
grid.style.transform = 'translateX(0)';
|
|
}
|
|
grid.addEventListener('transitionend', afterOut);
|
|
}
|
|
|
|
function animateDetailSwipe(direction, onDone) {
|
|
const tl = document.getElementById('detailTimeline');
|
|
if (!tl) { onDone(); return; }
|
|
|
|
tl.style.transition = 'none';
|
|
tl.style.transform = 'translateX(0)';
|
|
void tl.offsetWidth;
|
|
|
|
tl.style.transition = 'transform 0.3s ease';
|
|
tl.style.transform = `translateX(${direction > 0 ? '-100%' : '100%'})`;
|
|
|
|
function afterOut() {
|
|
tl.removeEventListener('transitionend', afterOut);
|
|
tl.style.transition = 'none';
|
|
tl.style.transform = `translateX(${direction > 0 ? '100%' : '-100%'})`;
|
|
onDone();
|
|
void tl.offsetWidth;
|
|
tl.style.transition = 'transform 0.3s ease';
|
|
tl.style.transform = 'translateX(0)';
|
|
}
|
|
tl.addEventListener('transitionend', afterOut);
|
|
}
|
|
|
|
window.Animate = {
|
|
rotateHand,
|
|
animateSwipe,
|
|
animateDetailSwipe
|
|
};
|
|
})();
|