drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #3172 from huanghong1125/fix-popper

Browse source 
解决dropdown弹出动画异常
This commit is contained in:
Aresn 2018-03-16 09:39:34 +08:00 • committed by GitHub
commit 57ad07f2ea
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 37 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/cascader/cascader.vue
View file

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

2
src/components/date-picker/picker.vue
View file

@ -23,7 +23,7 @@
></i-input>
</slot>
</div>
<transition :name="transition">
<transition name="transition-drop">
<Drop
@click.native="handleTransferClick"
v-show="opened"

2
src/components/dropdown/dropdown.vue
View file

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

10
src/components/select/dropdown.vue
View file

@ -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 () {

2
src/components/select/select.vue
View file

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

23
src/styles/animation/slide.less
View file

@ -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;