Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improves calendar navigation animation

Browse source 
Replaces the setTimeout-based animation with the Web Animations API for smoother transitions.

This change also introduces an event to notify other managers when the navigation animation is complete, allowing them to synchronize their states.
This commit is contained in:
Janus Knudsen 2025-08-13 23:37:23 +02:00
parent b03707853a
commit afe5b6b899
3 changed files with 57 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

87
src/managers/NavigationManager.ts
View file

@ -152,46 +152,59 @@ export class NavigationManager {
// Render new content for target week
this.renderWeekContent(newGrid, targetWeek);
// Animate transition (POC animation)
requestAnimationFrame(() => {
// Slide out current grid
(currentGrid as HTMLElement).style.transform = direction === 'next' ? 'translateX(-100%)' : 'translateX(100%)';
(currentGrid as HTMLElement).style.opacity = '0.5';
// Animate transition using Web Animations API
const slideOutAnimation = (currentGrid as HTMLElement).animate([
{ transform: 'translateX(0)', opacity: '1' },
{ transform: direction === 'next' ? 'translateX(-100%)' : 'translateX(100%)', opacity: '0.5' }
], {
duration: 400,
easing: 'ease-in-out',
fill: 'forwards'
});
const slideInAnimation = newGrid.animate([
{ transform: direction === 'next' ? 'translateX(100%)' : 'translateX(-100%)' },
{ transform: 'translateX(0)' }
], {
duration: 400,
easing: 'ease-in-out',
fill: 'forwards'
});
// Handle animation completion
slideInAnimation.addEventListener('finish', () => {
// Cleanup: Remove all old grids except the new one
const allGrids = container.querySelectorAll('swp-grid-container');
for (let i = 0; i < allGrids.length - 1; i++) {
allGrids[i].remove();
}
// Reset positioning
newGrid.style.position = 'relative';
// Cleanup: Remove all old grids except the new one after animation
setTimeout(() => {
const allGrids = container.querySelectorAll('swp-grid-container');
// Keep only the newest grid (last one), remove all others
for (let i = 0; i < allGrids.length - 1; i++) {
allGrids[i].remove();
}
}, 450);
// Update state
this.currentWeek = new Date(targetWeek);
this.animationQueue--;
// Slide in new grid
newGrid.style.transform = 'translateX(0)';
// If this was the last queued animation, ensure we're in sync
if (this.animationQueue === 0) {
this.currentWeek = new Date(this.targetWeek);
}
// Wait for new grid animation to complete before updating state
setTimeout(() => {
newGrid.style.position = 'relative';
// Only now is the animation truly complete
this.currentWeek = new Date(targetWeek);
this.animationQueue--;
// If this was the last queued animation, ensure we're in sync
if (this.animationQueue === 0) {
this.currentWeek = new Date(this.targetWeek);
}
// Update week info and notify other managers
this.updateWeekInfo();
this.eventBus.emit(EventTypes.WEEK_CHANGED, {
weekStart: this.currentWeek,
weekEnd: DateUtils.addDays(this.currentWeek, 6)
});
console.log(`NavigationManager: Completed ${direction} animation`);
}, 400); // Wait for slide-in animation to complete
// Update week info and notify other managers
this.updateWeekInfo();
this.eventBus.emit(EventTypes.WEEK_CHANGED, {
weekStart: this.currentWeek,
weekEnd: DateUtils.addDays(this.currentWeek, 6)
});
// Emit animation complete event for ScrollManager
this.eventBus.emit(EventTypes.NAVIGATION_ANIMATION_COMPLETE, {
direction,
weekStart: this.currentWeek
});
console.log(`NavigationManager: Completed ${direction} animation`);
});
}