blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-23 09:52:57 +08:00
Code Issues Projects Releases Wiki Activity

fix(Popup): animation

Browse Source
This commit is contained in:
chenjiahan 2020-07-06 15:06:05 +08:00
parent 57e035bb26
commit 7087922d18
3 changed files with 34 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src-next/popup/demo/index.vue
View File

@ -13,7 +13,11 @@
<van-cell :title="t('buttonLeft')" is-link @click="showLeft = true" /> <van-cell :title="t('buttonLeft')" is-link @click="showLeft = true" />
<van-cell :title="t('buttonRight')" is-link @click="showRight = true" /> <van-cell :title="t('buttonRight')" is-link @click="showRight = true" />
<van-popup v-model:show="showTop" position="top" :style="{ height: '30%' }" /> <van-popup
v-model:show="showTop"
position="top"
:style="{ height: '30%' }"
/>
<van-popup <van-popup
v-model:show="showBottom" v-model:show="showBottom"
position="bottom" position="bottom"
@ -140,12 +144,6 @@ export default {
showCustomIconPosition: false, showCustomIconPosition: false,
}; };
}, },
watch: {
showBasic(val) {
console.log('showBasic', val);
}
}
}; };
</script> </script>

52
src-next/popup/index.js
View File

@ -49,10 +49,6 @@ export default createComponent({
}, },
render() { render() {
if (!this.shouldRender) {
return;
}
const { round, position, duration } = this; const { round, position, duration } = this;
const isCenter = position === 'center'; const isCenter = position === 'center';
@ -76,29 +72,31 @@ export default createComponent({
onAfterEnter={this.onOpened} onAfterEnter={this.onOpened}
onAfterLeave={this.onClosed} onAfterLeave={this.onClosed}
> >
<div {this.shouldRender ? (
vShow={this.show} <div
ref="root" vShow={this.show}
style={style} ref="root"
class={bem({ style={style}
round, class={bem({
[position]: position, round,
'safe-area-inset-bottom': this.safeAreaInsetBottom, [position]: position,
})} 'safe-area-inset-bottom': this.safeAreaInsetBottom,
onClick={this.onClick} })}
{...this.$attrs} onClick={this.onClick}
> {...this.$attrs}
{this.$slots.default?.()} >
{this.closeable && ( {this.$slots.default?.()}
<Icon {this.closeable && (
role="button" <Icon
tabindex="0" role="button"
name={this.closeIcon} tabindex="0"
class={bem('close-icon', this.closeIconPosition)} name={this.closeIcon}
onClick={this.close} class={bem('close-icon', this.closeIconPosition)}
/> onClick={this.close}
)} />
</div> )}
</div>
) : null}
</Transition> </Transition>
</> </>
); );

8
src-next/popup/index.less
View File

@ -82,22 +82,22 @@
transition-timing-function: ease-in; transition-timing-function: ease-in;
} }
&-slide-top-enter, &-slide-top-enter-from,
&-slide-top-leave-active { &-slide-top-leave-active {
transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);
} }
&-slide-right-enter, &-slide-right-enter-from,
&-slide-right-leave-active { &-slide-right-leave-active {
transform: translate3d(100%, -50%, 0); transform: translate3d(100%, -50%, 0);
} }
&-slide-bottom-enter, &-slide-bottom-enter-from,
&-slide-bottom-leave-active { &-slide-bottom-leave-active {
transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);
} }
&-slide-left-enter, &-slide-left-enter-from,
&-slide-left-leave-active { &-slide-left-leave-active {
transform: translate3d(-100%, -50%, 0); transform: translate3d(-100%, -50%, 0);
} }