dennii/Termix
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 22 Wiki Activity

fix: Add key prop to force animation re-trigger on tab switch

Browse Source 
Each page container now has key={currentTab} to ensure React unmounts and remounts the element on every tab switch, properly triggering the slide-in animation
This commit is contained in:
ZacharyZcR
2025-11-09 08:15:02 +08:00
parent fe127e045f
commit aa94851f4a
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/ui/desktop/DesktopApp.tsx
View File

@@ -179,14 +179,14 @@ function AppContent() {
style={{ display: showTerminalView ? "block" : "none" }}
>
{showTerminalView && (
<div className="animate-in fade-in slide-in-from-right-4 duration-300">
<div key={currentTab} className="animate-in fade-in slide-in-from-right-4 duration-300">
<AppView isTopbarOpen={isTopbarOpen} />
</div>
)}
</div>
{showHome && (
<div className="h-screen w-full visible pointer-events-auto static overflow-hidden animate-in fade-in slide-in-from-right-4 duration-300">
<div key={currentTab} className="h-screen w-full visible pointer-events-auto static overflow-hidden animate-in fade-in slide-in-from-right-4 duration-300">
<Dashboard
onSelectView={handleSelectView}
isAuthenticated={isAuthenticated}
@@ -198,7 +198,7 @@ function AppContent() {
)}
{showSshManager && (
<div className="h-screen w-full visible pointer-events-auto static overflow-hidden animate-in fade-in slide-in-from-right-4 duration-300">
<div key={currentTab} className="h-screen w-full visible pointer-events-auto static overflow-hidden animate-in fade-in slide-in-from-right-4 duration-300">
<HostManager
onSelectView={handleSelectView}
isTopbarOpen={isTopbarOpen}
@@ -209,13 +209,13 @@ function AppContent() {
)}
{showAdmin && (
<div className="h-screen w-full visible pointer-events-auto static overflow-hidden animate-in fade-in slide-in-from-right-4 duration-300">
<div key={currentTab} className="h-screen w-full visible pointer-events-auto static overflow-hidden animate-in fade-in slide-in-from-right-4 duration-300">
<AdminSettings isTopbarOpen={isTopbarOpen} />
</div>
)}
{showProfile && (
<div className="h-screen w-full visible pointer-events-auto static overflow-auto animate-in fade-in slide-in-from-right-4 duration-300">
<div key={currentTab} className="h-screen w-full visible pointer-events-auto static overflow-auto animate-in fade-in slide-in-from-right-4 duration-300">
<UserProfile isTopbarOpen={isTopbarOpen} />
</div>
)}