other / mew-iview

Commit 57ad07f2eabe132394fe64b1ddc295f99e699cb2

Authored by Aresn
Committed by GitHub
2 parents a7262dbe 3d1fa034

Merge pull request #3172 from huanghong1125/fix-popper 

解决dropdown弹出动画异常
Showing 6 changed files with 37 additions and 4 deletions   Show diff stats
Inline Side-by-side
src/components/cascader/cascader.vue
  Show/Hide comments   View file @57ad07f
@@ -20,7 +20,7 @@ @@ -20,7 +20,7 @@
20 <Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon> 20 <Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon>
21 </slot> 21 </slot>
22 </div> 22 </div>
23 - <transition name="slide-up"> 23 + <transition name="transition-drop">
24 <Drop 24 <Drop
25 v-show="visible" 25 v-show="visible"
26 :class="{ [prefixCls + '-transfer']: transfer }" 26 :class="{ [prefixCls + '-transfer']: transfer }"
src/components/date-picker/picker.vue
  Show/Hide comments   View file @57ad07f
@@ -23,7 +23,7 @@ @@ -23,7 +23,7 @@
23 ></i-input> 23 ></i-input>
24 </slot> 24 </slot>
25 </div> 25 </div>
26 - <transition :name="transition"> 26 + <transition name="transition-drop">
27 <Drop 27 <Drop
28 @click.native="handleTransferClick" 28 @click.native="handleTransferClick"
29 v-show="opened" 29 v-show="opened"
src/components/dropdown/dropdown.vue
  Show/Hide comments   View file @57ad07f
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 @mouseenter="handleMouseenter" 5 @mouseenter="handleMouseenter"
6 @mouseleave="handleMouseleave"> 6 @mouseleave="handleMouseleave">
7 <div :class="[prefixCls + '-rel']" ref="reference" @click="handleClick"><slot></slot></div> 7 <div :class="[prefixCls + '-rel']" ref="reference" @click="handleClick"><slot></slot></div>
8 - <transition :name="transition"> 8 + <transition name="transition-drop">
9 <Drop 9 <Drop
10 :class="dropdownCls" 10 :class="dropdownCls"
11 v-show="currentVisible" 11 v-show="currentVisible"
src/components/select/dropdown.vue
  Show/Hide comments   View file @57ad07f
@@ -46,6 +46,12 @@ @@ -46,6 +46,12 @@
46 computeStyle:{ 46 computeStyle:{
47 gpuAcceleration: false, 47 gpuAcceleration: false,
48 } 48 }
  49 + },
  50 + onCreate:()=>{
  51 + this.resetTransformOrigin();
  52 + },
  53 + onUpdate:()=>{
  54 + this.resetTransformOrigin();
49 } 55 }
50 }); 56 });
51 }); 57 });
@@ -64,6 +70,10 @@ @@ -64,6 +70,10 @@
64 } 70 }
65 }, 300); 71 }, 300);
66 } 72 }
  73 + },
  74 + resetTransformOrigin() {
  75 + let placement = this.popper.popper.getAttribute('x-placement').split('-')[0];
  76 + this.popper.popper.style.transformOrigin = placement==='bottom'?'center top':'center bottom';
67 } 77 }
68 }, 78 },
69 created () { 79 created () {
src/components/select/select.vue
  Show/Hide comments   View file @57ad07f
@@ -35,7 +35,7 @@ @@ -35,7 +35,7 @@
35 <Icon type="arrow-down-b" :class="[prefixCls + '-arrow']" v-if="!remote"></Icon> 35 <Icon type="arrow-down-b" :class="[prefixCls + '-arrow']" v-if="!remote"></Icon>
36 </slot> 36 </slot>
37 </div> 37 </div>
38 - <transition :name="transitionName"> 38 + <transition name="transition-drop">
39 <Drop 39 <Drop
40 :class="dropdownCls" 40 :class="dropdownCls"
41 v-show="dropVisible" 41 v-show="dropVisible"
src/styles/animation/slide.less
  Show/Hide comments   View file @57ad07f
@@ -9,11 +9,34 @@ @@ -9,11 +9,34 @@
9 } 9 }
10 } 10 }
11 11
  12 +.slide-motion(transition-drop, ivuTransitionDrop);
12 .slide-motion(slide-up, ivuSlideUp); 13 .slide-motion(slide-up, ivuSlideUp);
13 .slide-motion(slide-down, ivuSlideDown); 14 .slide-motion(slide-down, ivuSlideDown);
14 .slide-motion(slide-left, ivuSlideLeft); 15 .slide-motion(slide-left, ivuSlideLeft);
15 .slide-motion(slide-right, ivuSlideRight); 16 .slide-motion(slide-right, ivuSlideRight);
16 17
  18 +@keyframes ivuTransitionDropIn {
  19 + 0% {
  20 + opacity: 0;
  21 + transform: scaleY(0.8);
  22 + }
  23 + 100% {
  24 + opacity: 1;
  25 + transform: scaleY(1);
  26 + }
  27 +}
  28 +
  29 +@keyframes ivuTransitionDropOut {
  30 + 0% {
  31 + opacity: 1;
  32 + transform: scaleY(1);
  33 + }
  34 + 100% {
  35 + opacity: 0;
  36 + transform: scaleY(0.8);
  37 + }
  38 +}
  39 +
17 @keyframes ivuSlideUpIn { 40 @keyframes ivuSlideUpIn {
18 0% { 41 0% {
19 opacity: 0; 42 opacity: 0;