blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

feat(Popup): improve transform style (#2193)

Browse Source
This commit is contained in:
neverland 2019-10-23 17:42:40 +08:00 committed by GitHub
parent 9a6ba89f3f
commit 1e506513de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
example/pages/popup/index.wxml
View File

@ -2,7 +2,7 @@
<van-cell title="展示弹出层" is-link bind:click="showBasic" /> <van-cell title="展示弹出层" is-link bind:click="showBasic" />
<van-popup <van-popup
show="{{ show.basic }}" show="{{ show.basic }}"
custom-style="padding: 16px 16px 160px" custom-style="padding: 30px 50px"
bind:close="hideBasic" bind:close="hideBasic"
> >
内容 内容

22
packages/popup/index.less
View File

@ -3,8 +3,6 @@
.van-popup { .van-popup {
position: fixed; position: fixed;
top: 50%;
left: 50%;
box-sizing: border-box; box-sizing: border-box;
max-height: 100%; max-height: 100%;
overflow-y: auto; overflow-y: auto;
@ -14,6 +12,8 @@
.theme(background-color, '@white'); .theme(background-color, '@white');
&--center { &--center {
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0);
&.van-popup--round { &.van-popup--round {
@ -23,11 +23,8 @@
&--top { &--top {
top: 0; top: 0;
right: auto; left: 0;
bottom: auto;
left: 50%;
width: 100%; width: 100%;
transform: translate3d(-50%, 0, 0);
&.van-popup--round { &.van-popup--round {
.theme( .theme(
@ -40,8 +37,6 @@
&--right { &--right {
top: 50%; top: 50%;
right: 0; right: 0;
bottom: auto;
left: auto;
transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0);
&.van-popup--round { &.van-popup--round {
@ -53,12 +48,9 @@
} }
&--bottom { &--bottom {
top: auto;
right: auto;
bottom: 0; bottom: 0;
left: 50%; left: 0;
width: 100%; width: 100%;
transform: translate3d(-50%, 0, 0);
&.van-popup--round { &.van-popup--round {
.theme( .theme(
@ -70,8 +62,6 @@
&--left { &--left {
top: 50%; top: 50%;
right: auto;
bottom: auto;
left: 0; left: 0;
transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0);
@ -169,12 +159,12 @@
.van-bottom-enter, .van-bottom-enter,
.van-bottom-leave-to { .van-bottom-leave-to {
transform: translate3d(-50%, 100%, 0); transform: translate3d(0, 100%, 0);
} }
.van-top-enter, .van-top-enter,
.van-top-leave-to { .van-top-leave-to {
transform: translate3d(-50%, -100%, 0); transform: translate3d(0, -100%, 0);
} }
.van-left-enter, .van-left-enter,