antialias/soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(toast): scope animations to prevent affecting other UI elements

Browse Source 
The toast CSS animations were using overly broad selectors like
[data-state='open'] which affected ANY element with data-state
attributes, causing nav items and other components to trigger the
toast slide-in/slide-out animations on hover.

Fixed by:
- Renaming animations: slideIn → toastSlideIn, etc.
- Scoping selectors: [data-radix-toast-viewport] [data-state='open']
- Now only toast elements within the viewport are animated

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
2025-10-14 11:01:15 -05:00
parent 2b68ddc732
commit 245ed8a625
1 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
apps/web/src/components/common/ToastContext.tsx
View File

@@ -179,7 +179,7 @@ export function ToastProvider({ children }: { children: ReactNode }) {
<style
dangerouslySetInnerHTML={{
__html: `
@keyframes slideIn {
@keyframes toastSlideIn {
from {
transform: translateX(calc(100% + 25px));
}
@@ -188,7 +188,7 @@ export function ToastProvider({ children }: { children: ReactNode }) {
}
}
@keyframes slideOut {
@keyframes toastSlideOut {
from {
transform: translateX(0);
}
@@ -197,7 +197,7 @@ export function ToastProvider({ children }: { children: ReactNode }) {
}
}
@keyframes hide {
@keyframes toastHide {
from {
opacity: 1;
}
@@ -206,25 +206,25 @@ export function ToastProvider({ children }: { children: ReactNode }) {
}
}
[data-state='open'] {
animation: slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
[data-radix-toast-viewport] [data-state='open'] {
animation: toastSlideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-state='closed'] {
animation: hide 100ms ease-in, slideOut 200ms cubic-bezier(0.32, 0, 0.67, 0);
[data-radix-toast-viewport] [data-state='closed'] {
animation: toastHide 100ms ease-in, toastSlideOut 200ms cubic-bezier(0.32, 0, 0.67, 0);
}
[data-swipe='move'] {
[data-radix-toast-viewport] [data-swipe='move'] {
transform: translateX(var(--radix-toast-swipe-move-x));
}
[data-swipe='cancel'] {
[data-radix-toast-viewport] [data-swipe='cancel'] {
transform: translateX(0);
transition: transform 200ms ease-out;
}
[data-swipe='end'] {
animation: slideOut 100ms ease-out;
[data-radix-toast-viewport] [data-swipe='end'] {
animation: toastSlideOut 100ms ease-out;
}
`,
}}