mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-28 22:42:11 +01:00
💫 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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user