From e09b07b79cc5962671966b9d42bac7e7cdf6f993 Mon Sep 17 00:00:00 2001
From: huanghong <huanghong1125@126.com>
Date: Fri, 16 Mar 2018 00:43:11 +0800
Subject: [PATCH] 解决drop弹出动画异常

---
 src/components/cascader/cascader.vue  |  2 +-
 src/components/date-picker/picker.vue |  2 +-
 src/components/dropdown/dropdown.vue  |  2 +-
 src/components/select/dropdown.vue    |  7 +++++++
 src/components/select/select.vue      |  2 +-
 src/styles/animation/slide.less       | 23 +++++++++++++++++++++++
 6 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/components/cascader/cascader.vue b/src/components/cascader/cascader.vue
index 6d8c945..22206ac 100644
--- a/src/components/cascader/cascader.vue
+++ b/src/components/cascader/cascader.vue
@@ -20,7 +20,7 @@
                 <Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon>
             </slot>
         </div>
-        <transition name="slide-up">
+        <transition name="transition-drop">
             <Drop
                 v-show="visible"
                 :class="{ [prefixCls + '-transfer']: transfer }"
diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index 61aa3ca..8d1939d 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -23,7 +23,7 @@
                 ></i-input>
             </slot>
         </div>
-        <transition :name="transition">
+        <transition name="transition-drop">
             <Drop
                 @click.native="handleTransferClick"
                 v-show="opened"
diff --git a/src/components/dropdown/dropdown.vue b/src/components/dropdown/dropdown.vue
index d319fa9..fff9ec4 100644
--- a/src/components/dropdown/dropdown.vue
+++ b/src/components/dropdown/dropdown.vue
@@ -5,7 +5,7 @@
         @mouseenter="handleMouseenter"
         @mouseleave="handleMouseleave">
         <div :class="[prefixCls + '-rel']" ref="reference" @click="handleClick"><slot></slot></div>
-        <transition :name="transition">
+        <transition name="transition-drop">
             <Drop
                 :class="dropdownCls"
                 v-show="currentVisible"
diff --git a/src/components/select/dropdown.vue b/src/components/select/dropdown.vue
index 8f50e5c..51f6ed0 100644
--- a/src/components/select/dropdown.vue
+++ b/src/components/select/dropdown.vue
@@ -46,6 +46,9 @@
                                 computeStyle:{
                                     gpuAcceleration: false,
                                 }
+                            },
+                            onCreate:()=>{
+                                this.resetTransformOrigin();
                             }
                         });
                     });
@@ -64,6 +67,10 @@
                         }
                     }, 300);
                 }
+            },
+            resetTransformOrigin() {
+                let placement = this.popper.popper.getAttribute('x-placement').split('-')[0];
+                this.popper.popper.style.transformOrigin = placement==='bottom'?'center top':'center bottom';
             }
         },
         created () {
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 3798a39..7a8ea3f 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -35,7 +35,7 @@
                 <Icon type="arrow-down-b" :class="[prefixCls + '-arrow']" v-if="!remote"></Icon>
             </slot>
         </div>
-        <transition :name="transitionName">
+        <transition name="transition-drop">
             <Drop
                 :class="dropdownCls"
                 v-show="dropVisible"
diff --git a/src/styles/animation/slide.less b/src/styles/animation/slide.less
index 3b3efde..83c0134 100644
--- a/src/styles/animation/slide.less
+++ b/src/styles/animation/slide.less
@@ -9,11 +9,34 @@
     }
 }
 
+.slide-motion(transition-drop, ivuTransitionDrop);
 .slide-motion(slide-up, ivuSlideUp);
 .slide-motion(slide-down, ivuSlideDown);
 .slide-motion(slide-left, ivuSlideLeft);
 .slide-motion(slide-right, ivuSlideRight);
 
+@keyframes ivuTransitionDropIn {
+    0% {
+        opacity: 0;
+        transform: scaleY(0.8);
+    }
+    100% {
+        opacity: 1;
+        transform: scaleY(1);
+    }
+}
+
+@keyframes ivuTransitionDropOut {
+    0% {
+        opacity: 1;
+        transform: scaleY(1);
+    }
+    100% {
+        opacity: 0;
+        transform: scaleY(0.8);
+    }
+}
+
 @keyframes ivuSlideUpIn {
     0% {
         opacity: 0;
--
libgit2 0.21.4