Merge pull request #3172 from huanghong1125/fix-popper

解决dropdown弹出动画异常

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 }"

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"

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"

src/components/select/dropdown.vue

@@ -46,6 +46,12 @@
                                 computeStyle:{
                                     gpuAcceleration: false,
                                 }
+                            },
+                            onCreate:()=>{
+                                this.resetTransformOrigin();
+                            },
+                            onUpdate:()=>{
+                                this.resetTransformOrigin();
                             }
                         });
                     });
@@ -64,6 +70,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 () {

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"

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;