tab回显页面 不显示动画效果

src/components/PageTransition/index.tsx

@@ -42,12 +42,28 @@ const PageTransition: React.FC<PageTransitionProps> = ({
 };
 
 // 简化版本 - 仅使用CSS动画
-export const SimplePageTransition: React.FC<{ children: React.ReactNode; className?: string }> = ({
+export const SimplePageTransition: React.FC<{ 
+    children: React.ReactNode; 
+    className?: string;
+    enableAnimation?: boolean;
+    onAnimationEnd?: () => void;
+}> = ({
     children,
     className = '',
+    enableAnimation = true,
+    onAnimationEnd,
 }) => {
+    const handleAnimationEnd = () => {
+        if (enableAnimation && onAnimationEnd) {
+            onAnimationEnd();
+        }
+    };
+
     return (
-        <div className={`simple-page-transition ${className}`}>
+        <div 
+            className={`${enableAnimation ? 'simple-page-transition' : ''} ${className}`}
+            onAnimationEnd={handleAnimationEnd}
+        >
             {children}
         </div>
     );

src/layouts/BasicLayout.tsx

@@ -93,6 +93,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
 
 
 	const [activeKey, setActiveKey] = useState<string>(location?.pathname || '/')
+	const [animatedPages, setAnimatedPages] = useState<Set<string>>(new Set());
 	const menuDataRef = useRef<MenuDataItem[]>([]);
 	const { formatMessage } = useIntl();
 
@@ -141,6 +142,13 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
 	// 改变panes
 	const handleTabsPanes = (payload: any): void => {
 		if (dispatch) {
+			// 检查是否为新页面
+			const isNewPage = !tabsPanes.some(tab => tab.path === payload.path);
+			if (isNewPage) {
+				// 标记新页面需要播放动画
+				setAnimatedPages(prev => new Set(prev).add(payload.path));
+			}
+			
 			dispatch({
 				type: 'global/changeTabsRoutes',
 				payload: { data: payload, action: 'add' },
@@ -161,6 +169,13 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
 			history.push(nextkey || '/')
 			setActiveKey(nextkey)
 
+			// 从动画记录中移除关闭的页面
+			setAnimatedPages(prev => {
+				const newSet = new Set(prev);
+				newSet.delete(targetKey as string);
+				return newSet;
+			});
+
 			// 缓存路由栈数据
 			dispatch({
 				type: 'global/changeTabsRoutes',
@@ -1007,6 +1022,13 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
 										break;
 								}
 
+								// 从动画记录中移除关闭的页面
+								setAnimatedPages(prev => {
+									const newSet = new Set(prev);
+									closeTabKeys.forEach(key => newSet.delete(key));
+									return newSet;
+								});
+
 								dispatch({
 									type: 'global/changeTabsRoutes',
 									payload: { data: closeTabKeys, action: 'remove' },
@@ -1036,19 +1058,35 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
 				}
 				moreIcon={<DoubleRightOutlined style={{ color: "#7b828c" }} />}
 			>
-				{tabsPanes && tabsPanes.map((item: tabsRoute) =>
+				{tabsPanes && tabsPanes.map((item: tabsRoute) => {
-					<TabPane
+					const shouldAnimate = animatedPages.has(item.path);
-						tab={item.title} key={item?.path}
+					
-						style={{ padding: 24, paddingTop: 0 }}>
+					return (
-						<SimplePageTransition>
+						<TabPane
-							<Suspense fallback={null}>
+							tab={item.title} 
-								<Authorized authority={authorized!.authority} noMatch={noMatch}>
+							key={item?.path}
-									{item.children}
+							style={{ padding: 24, paddingTop: 0 }}
-								</Authorized>
+						>
-							</Suspense>
+							<SimplePageTransition 
-						</SimplePageTransition>
+								enableAnimation={shouldAnimate}
-					</TabPane>)
+								onAnimationEnd={() => {
-				}
+									// 动画播放完成后，移除动画标记
+									setAnimatedPages(prev => {
+										const newSet = new Set(prev);
+										newSet.delete(item.path);
+										return newSet;
+									});
+								}}
+							>
+								<Suspense fallback={null}>
+									<Authorized authority={authorized!.authority} noMatch={noMatch}>
+										{item.children}
+									</Authorized>
+								</Suspense>
+							</SimplePageTransition>
+						</TabPane>
+					);
+				})}
 			</Tabs>
 			{/* 不要标签栏，删除tabs的代码，使用下方的代码就可以 */}
 			{/* <Authorized authority={authorized!.authority} noMatch={noMatch}>