fix: layout-sider and menu transition style(#6637) (#6640)

Author: selicens

components/layout/style/index.ts

@@ -99,7 +99,7 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = token => {
         // fix firefox can't set width smaller than content on flex item
         minWidth: 0,
         background: colorBgHeader,
-        transition: `all ${motionDurationMid}`,
+        transition: `all ${motionDurationMid}, background 0s`,
 
         '&-children': {
           height: '100%',

components/menu/style/index.ts

@@ -248,11 +248,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
         lineHeight: 0, // Fix display inline-block gap
         listStyle: 'none',
         outline: 'none',
-        transition: [
-          `background ${motionDurationSlow}`,
-          // Magic cubic here but smooth transition
-          `width ${motionDurationSlow} cubic-bezier(0.2, 0, 0, 1) 0s`,
-        ].join(','),
+        transition: `width ${motionDurationSlow} cubic-bezier(0.2, 0, 0, 1) 0s`,
 
         [`ul, ol`]: {
           margin: 0,