bam/my2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refactor Highlight Animation in AreaTabs Component

Browse Source 
- Updated highlight animation for newly added tabs to include a two-blink effect followed by a gradual fade-out.
- Adjusted timing for clearing highlights to ensure it occurs after the fade-out completes.
- Introduced a new background animation that stays visible during blinks and fades out slowly, enhancing visual feedback for users.
This commit is contained in:
Bastian Masanek
2025-11-05 02:30:42 +01:00
parent 344c3d6644
commit 4f49914d82
1 changed files with 55 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
app/components/navigation/AreaTabs.vue
View File

@@ -155,10 +155,13 @@ watch(visibleAreas, (newAreas, oldAreas) => {
}, 300 + (index * 150)) // Stagger: 300ms, 450ms, 600ms, ...
})
// Clear all highlights after animation
setTimeout(() => {
newlyAddedAreaIds.value = []
}, 2000)
// Clear all highlights after animation completes (including fade-out)
// Animation timeline: glow+pulse 2x (~1.4s) + fade-out (0.6s) = 2.0s
// Wait 2.1s to ensure fade-out completes before removing class
// TEMPORARILY DISABLED FOR TESTING
// setTimeout(() => {
// newlyAddedAreaIds.value = []
// }, 2100)
}
previousAreaIds.value = newAreaIds
@@ -295,22 +298,35 @@ function setTabRef(areaId: string, el: any) {
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Highlight animation for newly added tabs */
/* Highlight animation for newly added tabs - 2x blink then stay transparent */
@keyframes highlight-glow {
0%,
100% {
0% {
box-shadow: 0 0 0 0 rgba(233, 30, 133, 0);
}
50% {
/* First blink */
25% {
box-shadow: 0 0 20px 4px rgba(233, 30, 133, 0.6),
0 0 40px 8px rgba(201, 125, 255, 0.4);
}
50% {
box-shadow: 0 0 0 0 rgba(233, 30, 133, 0);
}
/* Second blink */
75% {
box-shadow: 0 0 20px 4px rgba(233, 30, 133, 0.6),
0 0 40px 8px rgba(201, 125, 255, 0.4);
}
/* Stay transparent after 2nd blink */
100% {
box-shadow: 0 0 0 0 rgba(233, 30, 133, 0);
}
}
@keyframes highlight-pulse {
0%,
100% {
transform: scale(1);
@@ -321,9 +337,35 @@ function setTabRef(areaId: string, el: any) {
}
}
/* Background gradient - stay visible during blinks, then fade out slowly */
@keyframes highlight-background {
0% {
background: linear-gradient(135deg, rgba(233, 30, 133, 0.2), rgba(201, 125, 255, 0.2));
}
/* Stay visible during first blink */
25% {
background: linear-gradient(135deg, rgba(233, 30, 133, 0.2), rgba(201, 125, 255, 0.2));
}
/* Start fading slowly after first blink (over 1s instead of 0.5s) */
50% {
background: linear-gradient(135deg, rgba(233, 30, 133, 0.2), rgba(201, 125, 255, 0.2));
}
/* Fade to transparent gradually */
100% {
background: transparent;
}
}
.tab-highlight {
animation: highlight-glow 1s ease-in-out 2,
highlight-pulse 0.5s ease-in-out 2;
background: linear-gradient(135deg, rgba(233, 30, 133, 0.2), rgba(201, 125, 255, 0.2)) !important;
/* Initial background state (will be animated) */
background: linear-gradient(135deg, rgba(233, 30, 133, 0.2), rgba(201, 125, 255, 0.2));
/* Animations */
animation: highlight-glow 2s ease-in-out 1 forwards,
highlight-pulse 0.5s ease-in-out 2,
highlight-background 2s ease-in-out 1 forwards;
}
</style>