diff --git a/components/dropdown/dropdown.jsx b/components/dropdown/dropdown.jsx index adf393555a..1c44242cfa 100644 --- a/components/dropdown/dropdown.jsx +++ b/components/dropdown/dropdown.jsx @@ -9,8 +9,12 @@ export default React.createClass({ }; }, render: function () { + const { overlay, ...otherProps } = this.props; + const menu = React.cloneElement(overlay, { + openTransitionName: 'zoom-big', + }); return ( - + ); } }); diff --git a/components/menu/index.jsx b/components/menu/index.jsx index 15c2208f5c..401cd45e6b 100644 --- a/components/menu/index.jsx +++ b/components/menu/index.jsx @@ -40,35 +40,43 @@ const AntMenu = React.createClass({ this.props.onClose(e); }, render() { - let openAnimation = ''; - switch (this.props.mode) { - case 'horizontal': - openAnimation = 'slide-up'; - break; - case 'vertical': - openAnimation = 'zoom-big'; - break; - case 'inline': - openAnimation = animation; - break; - default: + let openAnimation = this.props.openAnimation || this.props.openTransitionName; + if (!openAnimation) { + switch (this.props.mode) { + case 'horizontal': + openAnimation = 'slide-up'; + break; + case 'vertical': + openAnimation = 'zoom-big'; + break; + case 'inline': + openAnimation = animation; + break; + default: + } } - // 这组属性的目的是 - // 弹出型的菜单需要点击后立即关闭 - // 另外,弹出型的菜单的受控模式没有使用场景 - let props = { - openKeys: this.state.openKeys, - onClick: this.handleClick, - onOpen: this.handleOpenKeys, - onClose: this.handleCloseKeys, - }; + let props = {}; const className = this.props.className + ' ' + this.props.prefixCls + '-' + this.props.theme; if (this.props.mode === 'inline') { - return ; + // 这组属性的目的是 + // 弹出型的菜单需要点击后立即关闭 + // 另外,弹出型的菜单的受控模式没有使用场景 + props = { + openKeys: this.state.openKeys, + onClick: this.handleClick, + onOpen: this.handleOpenKeys, + onClose: this.handleCloseKeys, + openAnimation, + className, + }; } else { - return ; + props = { + openTransitionName: openAnimation, + className, + }; } + return ; } }); diff --git a/style/components/dropdown.less b/style/components/dropdown.less index 87e940a718..3603f28376 100644 --- a/style/components/dropdown.less +++ b/style/components/dropdown.less @@ -118,6 +118,7 @@ position: absolute; min-width: 100%; margin-left: 4px; + transform-origin: 0 0; } &-submenu:first-child &-submenu-title {