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

Improves header animation performance.

Browse source 
Refactors the header animation to animate the calendar header's height instead of just the all-day container.

This change improves the perceived performance of the animation. It also reduces animation duration.
This commit is contained in:
Janus Knudsen 2025-09-03 00:12:47 +02:00
parent 8332f2c748
commit 7f387cfa30
2 changed files with 10 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/renderers/HeaderRenderer.ts
View file

@ -115,13 +115,17 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
if (!calendarHeader || !allDayContainer) return;
// Get current parent height for animation
const currentParentHeight = parseFloat(getComputedStyle(calendarHeader).height);
const heightDifference = targetHeight - currentHeight;
const targetParentHeight = currentParentHeight + heightDifference;
const animations = [
// Container height animation
allDayContainer.animate([
{ height: `${currentHeight}px`, opacity: currentHeight > 0 ? '1' : '0' },
{ height: `${targetHeight}px`, opacity: '1' }
calendarHeader.animate([
{ height: `${currentParentHeight}px` },
{ height: `${targetParentHeight}px` }
], {
duration: 1000,
duration: 300,
easing: 'ease-out',
fill: 'forwards'
})
@ -137,7 +141,7 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
{ height: `${currentSpacerHeight}px` },
{ height: `${targetSpacerHeight}px` }
], {
duration: 1000,
duration: 300,
easing: 'ease-out',
fill: 'forwards'
})