Commit e09b07b79cc5962671966b9d42bac7e7cdf6f993
1 parent
a7262dbe
解决drop弹出动画异常
Showing
6 changed files
with
34 additions
and
4 deletions
Show diff stats
src/components/cascader/cascader.vue
| @@ -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
| @@ -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
| @@ -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
| @@ -46,6 +46,9 @@ | @@ -46,6 +46,9 @@ | ||
| 46 | computeStyle:{ | 46 | computeStyle:{ |
| 47 | gpuAcceleration: false, | 47 | gpuAcceleration: false, |
| 48 | } | 48 | } |
| 49 | + }, | ||
| 50 | + onCreate:()=>{ | ||
| 51 | + this.resetTransformOrigin(); | ||
| 49 | } | 52 | } |
| 50 | }); | 53 | }); |
| 51 | }); | 54 | }); |
| @@ -64,6 +67,10 @@ | @@ -64,6 +67,10 @@ | ||
| 64 | } | 67 | } |
| 65 | }, 300); | 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 | created () { | 76 | created () { |
src/components/select/select.vue
| @@ -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
| @@ -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; |