diff --git a/src/SubMenu/PopupTrigger.tsx b/src/SubMenu/PopupTrigger.tsx index f32ed5bb..aba6e1d6 100644 --- a/src/SubMenu/PopupTrigger.tsx +++ b/src/SubMenu/PopupTrigger.tsx @@ -62,9 +62,18 @@ export default function PopupTrigger({ const popupPlacement = popupPlacementMap[mode]; const targetMotion = getMotion(mode, motion, defaultMotions); + const targetMotionRef = React.useRef(targetMotion); + + if (mode !== 'inline') { + /** + * PopupTrigger is only used for vertical and horizontal types. + * When collapsed is unfolded, the inline animation will destroy the vertical animation. + */ + targetMotionRef.current = targetMotion; + } const mergedMotion: CSSMotionProps = { - ...targetMotion, + ...targetMotionRef.current, leavedClassName: `${prefixCls}-hidden`, removeOnLeave: false, motionAppear: true, diff --git a/tests/Menu.spec.js b/tests/Menu.spec.js index e973b0bb..f9212b83 100644 --- a/tests/Menu.spec.js +++ b/tests/Menu.spec.js @@ -574,6 +574,22 @@ describe('Menu', () => { rerender(genMenu({ mode: 'vertical' })); expect(global.triggerProps.popupMotion.motionName).toEqual('bambooLight'); }); + + it('inline does not affect vertical motion', () => { + const genMenu = props => ( + + + + + + ); + + const { rerender } = render(genMenu({ mode: 'vertical' })); + rerender(genMenu({ mode: 'inline' })); + expect(global.triggerProps.popupMotion.motionName).toEqual( + 'defaultMotion', + ); + }); }); it('onMouseEnter should work', () => {