From d1b91bcc991ea01851e1b6a8da741db648bd7c18 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 9 Feb 2017 15:44:33 +0800
Subject: [PATCH] Fix direction of pop animation for Dropdown, ref #4811

---
 components/dropdown/dropdown.tsx     | 13 +++++++++++--
 components/dropdown/style/index.less | 22 +++++++++++++++++-----
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx
index 43c8baa9c6..84ddd7ae61 100644
--- a/components/dropdown/dropdown.tsx
+++ b/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>
     );
diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less
index 214c1c8413..a3207020f5 100644
--- a/components/dropdown/style/index.less
+++ b/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;
   }
 }