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

fix: consolidate slide animation CSS - remove 3 conflicting keyframe blocks

Browse Source
This commit is contained in:
mARTin 2026-03-04 02:17:41 +01:00
parent bfa9c1f8e7
commit b7fa5ff7c0
1 changed files with 10 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
src/app/globals.css
View File

@ -569,48 +569,7 @@ h3 {
}
}
/* Slide IN animations (new content enters) */
@keyframes slideInFromLeft {
0% {
transform: translateX(-100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideInFromRight {
0% {
transform: translateX(100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
/* Going to next (content exits left, enters from right) */
.slide-out-left {
animation: slideOutLeft 0.25s ease-in forwards;
}
.slide-in-left {
animation: slideInFromRight 0.25s ease-out forwards;
}
/* Going to previous (content exits right, enters from left) */
.slide-out-right {
animation: slideOutRight 0.25s ease-in forwards;
}
.slide-in-right {
animation: slideInFromLeft 0.25s ease-out forwards;
}
/* Weekly Day Columns Grid */
.weekly-days-grid {
@ -2642,38 +2601,7 @@ h3 {
/* --- FIXES & NEW FEATURES --- */
/* Fix 1: Animation Overrides (Single-phase slide-in to prevent blank flash) */
@keyframes slideInFromLeft {
0% {
transform: translateX(-50px);
opacity: 0.5;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideInFromRight {
0% {
transform: translateX(50px);
opacity: 0.5;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.slide-in-left {
animation: slideInFromRight 0.5s ease-out forwards;
}
.slide-in-right {
animation: slideInFromLeft 0.5s ease-out forwards;
}
/* Consolidate Task Hover Actions - Removed redundant entries */
@ -2808,31 +2736,30 @@ h3 {
background: #333;
}
/* --- VIEW TRANSITION ANIMATION (Weekly-like) --- */
/* --- VIEW TRANSITION ANIMATION (Day/Week Navigation Slide) --- */
/* Base Slide Animations */
@keyframes slideOutToLeft {
to { transform: translateX(-20%); opacity: 0; }
to { transform: translateX(-30%); opacity: 0; }
}
@keyframes slideInFromRight {
from { transform: translateX(20%); opacity: 0; }
from { transform: translateX(30%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutToRight {
to { transform: translateX(20%); opacity: 0; }
to { transform: translateX(30%); opacity: 0; }
}
@keyframes slideInFromLeft {
from { transform: translateX(-20%); opacity: 0; }
from { transform: translateX(-30%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
/* Week Grid Transition Group */
::view-transition-group(week-grid) {
animation-duration: 0.4s;
animation-duration: 0.35s;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
/* Slide Next (Left) */
/* Slide Next (Left) — content exits left, new enters from right */
[data-slide-direction="next"]::view-transition-old(week-grid) {
animation-name: slideOutToLeft;
}
@ -2840,7 +2767,7 @@ h3 {
animation-name: slideInFromRight;
}
/* Slide Prev (Right) */
/* Slide Prev (Right) — content exits right, new enters from left */
[data-slide-direction="prev"]::view-transition-old(week-grid) {
animation-name: slideOutToRight;
}
@ -2848,49 +2775,7 @@ h3 {
animation-name: slideInFromLeft;
}
@keyframes slideOutToRight {
to {
transform: translateX(100%);
opacity: 0.8;
}
}
@keyframes slideInFromLeft {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
::view-transition-group(week-grid) {
animation-duration: 0.6s;
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* Next (forward): Old slides Left, New enters from Right */
[data-transition-direction="next"]::view-transition-old(week-grid) {
animation: slideOutToLeft 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) both;
mix-blend-mode: normal;
}
[data-transition-direction="next"]::view-transition-new(week-grid) {
animation: slideInFromRight 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) both;
mix-blend-mode: normal;
}
/* Prev (backward): Old slides Right, New enters from Left */
[data-transition-direction="prev"]::view-transition-old(week-grid) {
animation: slideOutToRight 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) both;
mix-blend-mode: normal;
}
[data-transition-direction="prev"]::view-transition-new(week-grid) {
animation: slideInFromLeft 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) both;
mix-blend-mode: normal;
}/* Smooth View Transitions */
/* Smooth View Transitions */
::view-transition-group(root) {
animation-duration: 0.5s;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@ -2898,8 +2783,7 @@ h3 {
::view-transition-old(root),
::view-transition-new(root) {
/* Ensure they mix/cross-fade or slide as expected */
/* Default is usually fine, but duration control is key */
/* Default cross-fade is fine for non-navigation transitions */
}
/* ============================================