feat: Add smooth transitions and animations to UI

- Add fade-in/fade-out transition to command palette (200ms)
- Add scale animation to command palette on open/close
- Add smooth popup animation to context menu (150ms)
- Add visual feedback for file selection with ring effect
- Add hover scale effect to file grid items
- Add transition-all to list view items for consistent behavior
- Zero JavaScript overhead, pure CSS transitions
- All animations under 200ms for instant feel
This commit is contained in:
ZacharyZcR
2025-11-09 06:48:31 +08:00
parent a2761c1ebf
commit f311a7a5ad
3 changed files with 32 additions and 11 deletions

View File

@@ -226,13 +226,17 @@ export function CommandPalette({
return (
<div
className={cn(
"fixed inset-0 z-50 flex items-center justify-center bg-black/30",
!isOpen && "hidden",
"fixed inset-0 z-50 flex items-center justify-center bg-black/30 transition-opacity duration-200",
!isOpen && "opacity-0 pointer-events-none",
)}
onClick={() => setIsOpen(false)}
>
<Command
className="w-3/4 max-w-2xl max-h-[60vh] rounded-lg border-2 border-dark-border shadow-md flex flex-col"
className={cn(
"w-3/4 max-w-2xl max-h-[60vh] rounded-lg border-2 border-dark-border shadow-md flex flex-col",
"transition-all duration-200 ease-out",
!isOpen && "scale-95 opacity-0",
)}
onClick={(e) => e.stopPropagation()}
>
<CommandInput