mARTin-B78/My-Weekly-ToDo-List
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 5x longer week slide animation (1.75s vs 0.35s day)

Browse Source
This commit is contained in:
mARTin 2026-03-04 09:01:04 +01:00
parent 9fa646fa55
commit c5c713da11
4 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "my-weekly-todo-list", "name": "my-weekly-todo-list",
"version": "1.11.1", "version": "1.11.2",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
@ -11879,4 +11879,4 @@
} }
} }
} }
} }

4
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "my-weekly-todo-list", "name": "my-weekly-todo-list",
"version": "1.11.1", "version": "1.11.2",
"description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view", "description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
@ -59,4 +59,4 @@
"ts-jest": "^29.0.0", "ts-jest": "^29.0.0",
"typescript": "^5.0.0" "typescript": "^5.0.0"
} }
} }

8
src/app/globals.css
View File

@ -2758,6 +2758,14 @@ h3 {
animation: navSlideInFromLeft 0.35s cubic-bezier(0.25, 1, 0.5, 1) both; animation: navSlideInFromLeft 0.35s cubic-bezier(0.25, 1, 0.5, 1) both;
} }
/* Week navigation: 5x longer for a more dramatic slide */
.slide-animate-week-next {
animation: navSlideInFromRight 1.75s cubic-bezier(0.25, 1, 0.5, 1) both;
}
.slide-animate-week-prev {
animation: navSlideInFromLeft 1.75s cubic-bezier(0.25, 1, 0.5, 1) both;
}
/* Smooth View Transitions */ /* Smooth View Transitions */
::view-transition-group(root) { ::view-transition-group(root) {
animation-duration: 0.5s; animation-duration: 0.5s;

10
src/components/WeeklyView.tsx
View File

@ -2089,6 +2089,7 @@ export default function WeeklyView() {
// Navigation handlers with CSS class-based slide animation (works in all browsers) // Navigation handlers with CSS class-based slide animation (works in all browsers)
const gridRef = useRef<HTMLElement>(null); const gridRef = useRef<HTMLElement>(null);
const allSlideClasses = ["slide-animate-next", "slide-animate-prev", "slide-animate-week-next", "slide-animate-week-prev"];
const navigate = ( const navigate = (
newDate: Date, newDate: Date,
direction: "left" | "right", direction: "left" | "right",
@ -2097,14 +2098,15 @@ export default function WeeklyView() {
const grid = gridRef.current; const grid = gridRef.current;
if (grid) { if (grid) {
// Remove any existing animation class // Remove any existing animation class
grid.classList.remove("slide-animate-next", "slide-animate-prev"); grid.classList.remove(...allSlideClasses);
// Trigger reflow to restart animation if same direction // Trigger reflow to restart animation if same direction
void grid.offsetWidth; void grid.offsetWidth;
// Add new animation class // Pick class: week uses longer animation
grid.classList.add(direction === "left" ? "slide-animate-next" : "slide-animate-prev"); const prefix = type === "week" ? "slide-animate-week-" : "slide-animate-";
grid.classList.add(prefix + (direction === "left" ? "next" : "prev"));
// Clean up after animation // Clean up after animation
const cleanup = () => { const cleanup = () => {
grid.classList.remove("slide-animate-next", "slide-animate-prev"); grid.classList.remove(...allSlideClasses);
grid.removeEventListener("animationend", cleanup); grid.removeEventListener("animationend", cleanup);
}; };
grid.addEventListener("animationend", cleanup, { once: true }); grid.addEventListener("animationend", cleanup, { once: true });