fix(layout): fix abnormal animation playback.

close #7314
ant-design · Jul 12, 2023 · 854ce2b · 854ce2b
1 parent c1e7cdd
commit 854ce2b
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/packages/layout/src/components/SiderMenu/style/index.ts b/packages/layout/src/components/SiderMenu/style/index.ts
@@ -7,10 +7,9 @@ export interface SiderMenuToken extends ProAliasToken {
 }
 
 export const proLayoutTitleHide = new Keyframes('antBadgeLoadingCircle', {
-  '0%': { display: 'none', opacity: 0 },
+  '0%': { display: 'none', opacity: 0, overflow: 'hidden' },
   '80%': {
-    display: 'none',
-    opacity: 0,
+    overflow: 'hidden',
   },
   '100%': {
     display: 'unset',
@@ -79,6 +78,9 @@ const genSiderMenuStyle: GenerateStyle<SiderMenuToken> = (token) => {
               marginInlineEnd: 0,
               marginInlineStart: 6,
               color: token.layout?.sider?.colorTextMenuTitle,
+              animationName: proLayoutTitleHide,
+              animationDuration: '.4s',
+              animationTimingFunction: 'ease',
               fontWeight: 600,
               fontSize: 16,
               lineHeight: '22px',
@@ -173,7 +175,7 @@ const genSiderMenuStyle: GenerateStyle<SiderMenuToken> = (token) => {
           paddingBlockEnd: 16,
           fontSize: token.fontSize,
           animationName: proLayoutTitleHide,
-          animationDuration: '.3s',
+          animationDuration: '.4s',
           animationTimingFunction: 'ease',
         },
       },