Skip to content

Commit 1f49563

Browse files
dpp0507007insummer
dpp050700
authored and
7insummer
committed
feat: 增加popup组件的出场动画（#622） (#641)
1 parent 2b67682 commit 1f49563

File tree

9 files changed

+176
-36
lines changed

9 files changed

+176
-36
lines changed

‎dist/popup/index.js‎

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ Component({
1313
},
1414
// 动画效果的显示和隐藏
1515
animation: {
16-
type: String,
17-
value: 'show'
16+
type: Boolean,
17+
value: true
1818
},
1919
// slot的位置
2020
contentAlign: {
@@ -41,7 +41,7 @@ Component({
4141
* 组件的初始数据
4242
*/
4343
data: {
44-
44+
status: 'show'
4545
},
4646

4747
/**
@@ -53,7 +53,7 @@ Component({
5353
wx.lin.showPopup = (options) => {
5454
const {
5555
zIndex = 99,
56-
animation = 'show',
56+
animation = true,
5757
contentAlign = 'center',
5858
locked = false
5959
} = { ...options };
@@ -67,8 +67,14 @@ Component({
6767
};
6868
wx.lin.hidePopup = () => {
6969
this.setData({
70-
show: false
70+
status: 'hide'
7171
});
72+
setTimeout(()=>{
73+
this.setData({
74+
show: false,
75+
status: 'show'
76+
});
77+
},300);
7278
};
7379
},
7480
// 阻止滑动
@@ -84,9 +90,25 @@ Component({
8490
let detail = true;
8591
let option = { bubbles: true, composed: true };
8692
if (this.data.locked !== true) {
87-
this.setData({
88-
show: !this.data.show
89-
});
93+
if(!this.data.show) {
94+
this.setData({
95+
show: true,
96+
status: 'show'
97+
});
98+
} else {
99+
this.setData({
100+
status: 'hide'
101+
});
102+
setTimeout(()=>{
103+
this.setData({
104+
show: false,
105+
status: 'show'
106+
});
107+
},300);
108+
}
109+
// this.setData({
110+
// show: !this.data.show
111+
// });
90112
}
91113

92114
this.triggerEvent('lintap', detail, option);

‎dist/popup/index.wxml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
<view class='container-bg l-bg-class'></view>
44
<view
55
wx:if="{{show}}"
6-
class="popup-content {{ show ? contentAlign : ''}} popup-fade-{{show ? contentAlign : ''}}-active-{{animation}}" catchtap='onPupopTap'>
6+
class="popup-content {{ show ? contentAlign : ''}} popup-fade-{{contentAlign}}-active-{{animation ? status:''}}" catchtap='onPupopTap'>
77
<view catchtap="doNothingTap">
88
<slot></slot>
99
</view>
1010
</view>
11-
</view>
11+
</view>

‎dist/popup/index.wxss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
.container-popup{visibility:hidden;position:fixed;top:0;left:0;right:0;bottom:0}.popup-show{visibility:visible}.popup-show .container-bg{display:block;opacity:1}.container-bg{opacity:0;position:fixed;top:0;left:0;right:0;bottom:0;z-index:6;background:rgba(0,0,0,.4);transition:all .3s ease-in-out}.popup-bg{height:100%;width:100%;position:absolute;z-index:90}.popup-content{position:absolute;z-index:100;width:100%;max-width:100%;height:100%}.center{display:flex;height:100%;width:100%;flex-direction:row;align-items:center;justify-content:center}.left{display:flex;flex-direction:row;height:100%}.right{display:flex;flex-direction:row;justify-content:flex-end;height:100%}.bottom{display:flex;flex-direction:column-reverse;width:100%}.popup-fade-center-active-show{animation:popup-center-fadein .4s}.popup-fade-top-active-show{animation:popup-top-fadein .3s ease-in-out}.popup-fade-right-active-show{animation:popup-right-fadein .3s ease-in-out}.popup-fade-left-active-show{animation:popup-left-fadein .3s ease-in-out}.popup-fade-bottom-active-show{animation:popup-bottom-fadein .3s ease-in-out}@keyframes popup-center-fadein{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@keyframes popup-top-fadein{0%{transform:translate3d(0,-100%,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-left-fadein{0%{transform:translate3d(-100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-right-fadein{0%{transform:translate3d(100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-bottom-fadein{0%{transform:translate3d(0,100%,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}
1+
.container-popup{visibility:hidden;position:fixed;top:0;left:0;right:0;bottom:0}.popup-show{visibility:visible}.popup-show .container-bg{display:block;opacity:1}.container-bg{opacity:0;position:fixed;top:0;left:0;right:0;bottom:0;z-index:6;background:rgba(0,0,0,.4);transition:all .3s ease-in-out}.popup-bg{height:100%;width:100%;position:absolute;z-index:90}.popup-content{position:absolute;z-index:100;width:100%;max-width:100%;height:100%}.center{display:flex;height:100%;width:100%;flex-direction:row;align-items:center;justify-content:center}.left{display:flex;flex-direction:row;height:100%}.right{display:flex;flex-direction:row;justify-content:flex-end;height:100%}.bottom{display:flex;flex-direction:column-reverse;width:100%}.popup-fade-center-active-show{animation:popup-center-fadein .4s}.popup-fade-center-active-hide{animation:popup-center-fadeout .4s}.popup-fade-top-active-show{animation:popup-top-fadein .3s ease-in-out}.popup-fade-top-active-hide{animation:popup-top-fadeout .3s ease-in-out}.popup-fade-right-active-show{animation:popup-right-fadein .3s ease-in-out}.popup-fade-right-active-hide{animation:popup-right-fadeout .3s ease-in-out}.popup-fade-left-active-show{animation:popup-left-fadein .3s ease-in-out}.popup-fade-left-active-hide{animation:popup-left-fadeout .3s ease-in-out}.popup-fade-bottom-active-show{animation:popup-bottom-fadein .3s ease-in-out}.popup-fade-bottom-active-hide{animation:popup-bottom-fadeout .3s ease-in-out}@keyframes popup-center-fadein{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@keyframes popup-center-fadeout{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1)}100%{transform:scale(.8);opacity:0}}@keyframes popup-top-fadein{0%{transform:translate3d(0,-100%,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-top-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,-100%,0);opacity:.1}}@keyframes popup-left-fadein{0%{transform:translate3d(-100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-left-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(-100%,0,0);opacity:.1}}@keyframes popup-right-fadein{0%{transform:translate3d(100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-right-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(100%,0,0);opacity:.1}}@keyframes popup-bottom-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,100%,0);opacity:.1}}

‎examples/dist/popup/index.js‎

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ Component({
1313
},
1414
// 动画效果的显示和隐藏
1515
animation: {
16-
type: String,
17-
value: 'show'
16+
type: Boolean,
17+
value: true
1818
},
1919
// slot的位置
2020
contentAlign: {
@@ -41,7 +41,7 @@ Component({
4141
* 组件的初始数据
4242
*/
4343
data: {
44-
44+
status: 'show'
4545
},
4646

4747
/**
@@ -53,7 +53,7 @@ Component({
5353
wx.lin.showPopup = (options) => {
5454
const {
5555
zIndex = 99,
56-
animation = 'show',
56+
animation = true,
5757
contentAlign = 'center',
5858
locked = false
5959
} = { ...options };
@@ -67,8 +67,14 @@ Component({
6767
};
6868
wx.lin.hidePopup = () => {
6969
this.setData({
70-
show: false
70+
status: 'hide'
7171
});
72+
setTimeout(()=>{
73+
this.setData({
74+
show: false,
75+
status: 'show'
76+
});
77+
},300);
7278
};
7379
},
7480
// 阻止滑动
@@ -84,9 +90,25 @@ Component({
8490
let detail = true;
8591
let option = { bubbles: true, composed: true };
8692
if (this.data.locked !== true) {
87-
this.setData({
88-
show: !this.data.show
89-
});
93+
if(!this.data.show) {
94+
this.setData({
95+
show: true,
96+
status: 'show'
97+
});
98+
} else {
99+
this.setData({
100+
status: 'hide'
101+
});
102+
setTimeout(()=>{
103+
this.setData({
104+
show: false,
105+
status: 'show'
106+
});
107+
},300);
108+
}
109+
// this.setData({
110+
// show: !this.data.show
111+
// });
90112
}
91113

92114
this.triggerEvent('lintap', detail, option);

‎examples/dist/popup/index.wxml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
<view class='container-bg l-bg-class'></view>
44
<view
55
wx:if="{{show}}"
6-
class="popup-content {{ show ? contentAlign : ''}} popup-fade-{{show ? contentAlign : ''}}-active-{{animation}}" catchtap='onPupopTap'>
6+
class="popup-content {{ show ? contentAlign : ''}} popup-fade-{{contentAlign}}-active-{{animation ? status:''}}" catchtap='onPupopTap'>
77
<view catchtap="doNothingTap">
88
<slot></slot>
99
</view>
1010
</view>
11-
</view>
11+
</view>

‎examples/dist/popup/index.wxss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
.container-popup{visibility:hidden;position:fixed;top:0;left:0;right:0;bottom:0}.popup-show{visibility:visible}.popup-show .container-bg{display:block;opacity:1}.container-bg{opacity:0;position:fixed;top:0;left:0;right:0;bottom:0;z-index:6;background:rgba(0,0,0,.4);transition:all .3s ease-in-out}.popup-bg{height:100%;width:100%;position:absolute;z-index:90}.popup-content{position:absolute;z-index:100;width:100%;max-width:100%;height:100%}.center{display:flex;height:100%;width:100%;flex-direction:row;align-items:center;justify-content:center}.left{display:flex;flex-direction:row;height:100%}.right{display:flex;flex-direction:row;justify-content:flex-end;height:100%}.bottom{display:flex;flex-direction:column-reverse;width:100%}.popup-fade-center-active-show{animation:popup-center-fadein .4s}.popup-fade-top-active-show{animation:popup-top-fadein .3s ease-in-out}.popup-fade-right-active-show{animation:popup-right-fadein .3s ease-in-out}.popup-fade-left-active-show{animation:popup-left-fadein .3s ease-in-out}.popup-fade-bottom-active-show{animation:popup-bottom-fadein .3s ease-in-out}@keyframes popup-center-fadein{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@keyframes popup-top-fadein{0%{transform:translate3d(0,-100%,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-left-fadein{0%{transform:translate3d(-100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-right-fadein{0%{transform:translate3d(100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-bottom-fadein{0%{transform:translate3d(0,100%,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}
1+
.container-popup{visibility:hidden;position:fixed;top:0;left:0;right:0;bottom:0}.popup-show{visibility:visible}.popup-show .container-bg{display:block;opacity:1}.container-bg{opacity:0;position:fixed;top:0;left:0;right:0;bottom:0;z-index:6;background:rgba(0,0,0,.4);transition:all .3s ease-in-out}.popup-bg{height:100%;width:100%;position:absolute;z-index:90}.popup-content{position:absolute;z-index:100;width:100%;max-width:100%;height:100%}.center{display:flex;height:100%;width:100%;flex-direction:row;align-items:center;justify-content:center}.left{display:flex;flex-direction:row;height:100%}.right{display:flex;flex-direction:row;justify-content:flex-end;height:100%}.bottom{display:flex;flex-direction:column-reverse;width:100%}.popup-fade-center-active-show{animation:popup-center-fadein .4s}.popup-fade-center-active-hide{animation:popup-center-fadeout .4s}.popup-fade-top-active-show{animation:popup-top-fadein .3s ease-in-out}.popup-fade-top-active-hide{animation:popup-top-fadeout .3s ease-in-out}.popup-fade-right-active-show{animation:popup-right-fadein .3s ease-in-out}.popup-fade-right-active-hide{animation:popup-right-fadeout .3s ease-in-out}.popup-fade-left-active-show{animation:popup-left-fadein .3s ease-in-out}.popup-fade-left-active-hide{animation:popup-left-fadeout .3s ease-in-out}.popup-fade-bottom-active-show{animation:popup-bottom-fadein .3s ease-in-out}.popup-fade-bottom-active-hide{animation:popup-bottom-fadeout .3s ease-in-out}@keyframes popup-center-fadein{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@keyframes popup-center-fadeout{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1)}100%{transform:scale(.8);opacity:0}}@keyframes popup-top-fadein{0%{transform:translate3d(0,-100%,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-top-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,-100%,0);opacity:.1}}@keyframes popup-left-fadein{0%{transform:translate3d(-100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-left-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(-100%,0,0);opacity:.1}}@keyframes popup-right-fadein{0%{transform:translate3d(100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-right-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(100%,0,0);opacity:.1}}@keyframes popup-bottom-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,100%,0);opacity:.1}}

‎src/popup/index.js‎

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ Component({
1313
},
1414
// 动画效果的显示和隐藏
1515
animation: {
16-
type: String,
17-
value: 'show'
16+
type: Boolean,
17+
value: true
1818
},
1919
// slot的位置
2020
contentAlign: {
@@ -41,7 +41,7 @@ Component({
4141
* 组件的初始数据
4242
*/
4343
data: {
44-
44+
status: 'show'
4545
},
4646

4747
/**
@@ -53,7 +53,7 @@ Component({
5353
wx.lin.showPopup = (options) => {
5454
const {
5555
zIndex = 99,
56-
animation = 'show',
56+
animation = true,
5757
contentAlign = 'center',
5858
locked = false
5959
} = { ...options };
@@ -67,8 +67,14 @@ Component({
6767
};
6868
wx.lin.hidePopup = () => {
6969
this.setData({
70-
show: false
70+
status: 'hide'
7171
});
72+
setTimeout(()=>{
73+
this.setData({
74+
show: false,
75+
status: 'show'
76+
});
77+
},300);
7278
};
7379
},
7480
// 阻止滑动
@@ -84,9 +90,25 @@ Component({
8490
let detail = true;
8591
let option = { bubbles: true, composed: true };
8692
if (this.data.locked !== true) {
87-
this.setData({
88-
show: !this.data.show
89-
});
93+
if(!this.data.show) {
94+
this.setData({
95+
show: true,
96+
status: 'show'
97+
});
98+
} else {
99+
this.setData({
100+
status: 'hide'
101+
});
102+
setTimeout(()=>{
103+
this.setData({
104+
show: false,
105+
status: 'show'
106+
});
107+
},300);
108+
}
109+
// this.setData({
110+
// show: !this.data.show
111+
// });
90112
}
91113

92114
this.triggerEvent('lintap', detail, option);

‎src/popup/index.less‎

Lines changed: 78 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,22 +75,42 @@
7575
animation: popup-center-fadein 0.4s;
7676
}
7777

78+
.popup-fade-center-active-hide {
79+
animation: popup-center-fadeout 0.4s;
80+
}
81+
7882
.popup-fade-top-active-show {
7983
animation:popup-top-fadein 0.3s ease-in-out;
8084
}
8185

86+
.popup-fade-top-active-hide {
87+
animation:popup-top-fadeout 0.3s ease-in-out;
88+
}
89+
8290
.popup-fade-right-active-show {
8391
animation: popup-right-fadein 0.3s ease-in-out;
8492
}
8593

94+
.popup-fade-right-active-hide {
95+
animation: popup-right-fadeout 0.3s ease-in-out;
96+
}
97+
8698
.popup-fade-left-active-show {
8799
animation: popup-left-fadein 0.3s ease-in-out;
88100
}
89101

102+
.popup-fade-left-active-hide {
103+
animation: popup-left-fadeout 0.3s ease-in-out;
104+
}
105+
90106
.popup-fade-bottom-active-show {
91107
animation: popup-bottom-fadein 0.3s ease-in-out;
92108
}
93109

110+
.popup-fade-bottom-active-hide {
111+
animation: popup-bottom-fadeout 0.3s ease-in-out;
112+
}
113+
94114
// .popup-fade-center-leave {
95115
// opacity: 0;
96116
// }
@@ -111,6 +131,22 @@
111131
}
112132
}
113133

134+
@keyframes popup-center-fadeout {
135+
0% {
136+
transform: scale(1);
137+
opacity: 1;
138+
}
139+
140+
50% {
141+
transform: scale(1.1);
142+
}
143+
144+
100% {
145+
transform: scale(0.8);
146+
opacity: 0;
147+
}
148+
}
149+
114150
@keyframes popup-top-fadein {
115151
0% {
116152
transform: translate3d(0, -100%, 0);
@@ -123,6 +159,18 @@
123159
}
124160
}
125161

162+
@keyframes popup-top-fadeout {
163+
0% {
164+
transform: translate3d(0, 0, 0);
165+
opacity: 1;
166+
}
167+
168+
100% {
169+
transform: translate3d(0, -100%, 0);
170+
opacity: 0.1;
171+
}
172+
}
173+
126174
@keyframes popup-left-fadein {
127175
0% {
128176
transform: translate3d(-100%, 0, 0);
@@ -136,6 +184,20 @@
136184
}
137185
}
138186

187+
@keyframes popup-left-fadeout {
188+
0% {
189+
transform: translate3d(0, 0, 0);
190+
opacity: 1;
191+
}
192+
193+
194+
100% {
195+
transform: translate3d(-100%, 0, 0);
196+
opacity: 0.1;
197+
}
198+
}
199+
200+
139201
@keyframes popup-right-fadein {
140202
0% {
141203
transform: translate3d(100%, 0, 0);
@@ -153,15 +215,27 @@
153215
}
154216
}
155217

156-
@keyframes popup-bottom-fadein {
218+
@keyframes popup-right-fadeout {
157219
0% {
158-
transform: translate3d(0, 100%, 0);
159-
opacity: 0.1;
220+
transform: translate3d(0, 0, 0);
221+
opacity: 1;
160222
}
161223

162-
163224
100% {
225+
transform: translate3d(100%, 0, 0);
226+
opacity: 0.1;
227+
}
228+
}
229+
230+
@keyframes popup-bottom-fadeout {
231+
0% {
164232
transform: translate3d(0, 0, 0);
165233
opacity: 1;
166234
}
235+
236+
237+
100% {
238+
transform: translate3d(0, 100%, 0);
239+
opacity: 0.1;
240+
}
167241
}

0 commit comments

Comments
 (0)