chenhaodong / mew-iview

Commit e09b07b79cc5962671966b9d42bac7e7cdf6f993

Authored by huanghong
1 parent a7262dbe

解决drop弹出动画异常

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