💫 feat(shell-tabs): add subtle animation for active tab

- Add scale pulse animation when tab becomes active
- Respect prefers-reduced-motion for accessibility
- Prevent animation during fade-slide-out transitions
This commit is contained in:
Lorenz Hilpert
2025-12-11 13:54:49 +01:00
parent 33026c064f
commit 3d217ae83a

View File

@@ -2,8 +2,32 @@
@apply block opacity-40 self-end;
}
:host.active {
:host.active:not(.fade-slide-out) {
@apply opacity-100;
animation: tabActivate 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
:host.active.fade-slide-out {
@apply opacity-100;
}
/* Active tab animation - subtle scale pulse */
@keyframes tabActivate {
0% {
transform: scale(1);
}
50% {
transform: scale(1.03);
}
100% {
transform: scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
:host.active:not(.fade-slide-out) {
animation: none;
}
}
a {