Fix direction of pop animation for Dropdown, ref #4811

components/dropdown/dropdown.tsx

@@ -11,24 +11,33 @@ export interface DropDownProps {
   align?: Object;
   getPopupContainer?: () => HTMLElement;
   prefixCls?: string;
+  placement?: 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
 }
 
 export default class Dropdown extends React.Component<DropDownProps, any> {
   static Button: React.ReactNode;
   static defaultProps = {
-    transitionName: 'slide-up',
     prefixCls: 'ant-dropdown',
     mouseEnterDelay: 0.15,
     mouseLeaveDelay: 0.1,
+    placement: 'bottomLeft',
   };
 
+  getTransitionName() {
+    const { placement = '' } = this.props;
+    if (placement.indexOf('top') >= 0) {
+      return 'slide-down';
+    }
+    return 'slide-up';
+  }
+
   render() {
     const { children, prefixCls } = this.props;
     const dropdownTrigger = cloneElement(children as any, {
       className: classNames((children as any).props.className, `${prefixCls}-trigger`),
     });
     return (
-      <RcDropdown {...this.props}>
+      <RcDropdown transitionName={this.getTransitionName()} {...this.props}>
         {dropdownTrigger}
       </RcDropdown>
     );

components/dropdown/style/index.less

@@ -134,21 +134,33 @@
     }
   }
 
-  &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
-  &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft {
+  &.slide-down-enter.slide-down-enter-active&-placement-bottomLeft,
+  &.slide-down-appear.slide-down-appear-active&-placement-bottomLeft,
+  &.slide-down-enter.slide-down-enter-active&-placement-bottomCenter,
+  &.slide-down-appear.slide-down-appear-active&-placement-bottomCenter,
+  &.slide-down-enter.slide-down-enter-active&-placement-bottomRight,
+  &.slide-down-appear.slide-down-appear-active&-placement-bottomRight {
     animation-name: antSlideUpIn;
   }
 
   &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
-  &.slide-up-appear.slide-up-appear-active&-placement-topLeft {
+  &.slide-up-appear.slide-up-appear-active&-placement-topLeft,
+  &.slide-up-enter.slide-up-enter-active&-placement-topCenter,
+  &.slide-up-appear.slide-up-appear-active&-placement-topCenter,
+  &.slide-up-enter.slide-up-enter-active&-placement-topRight,
+  &.slide-up-appear.slide-up-appear-active&-placement-topRight {
     animation-name: antSlideDownIn;
   }
 
-  &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft {
+  &.slide-down-leave.slide-down-leave-active&-placement-bottomLeft,
+  &.slide-down-leave.slide-down-leave-active&-placement-bottomCenter,
+  &.slide-down-leave.slide-down-leave-active&-placement-bottomRight {
     animation-name: antSlideUpOut;
   }
 
-  &.slide-up-leave.slide-up-leave-active&-placement-topLeft {
+  &.slide-up-leave.slide-up-leave-active&-placement-topLeft,
+  &.slide-up-leave.slide-up-leave-active&-placement-topCenter,
+  &.slide-up-leave.slide-up-leave-active&-placement-topRight {
     animation-name: antSlideDownOut;
   }
 }