微信小程序电商系统省市区选择器： 实现动画底部弹出悬浮框 ... ...

要点一：固定底部（position:fixed）

1. page {
2. position: relative;
3. height: 100%;
4. }
5.  
6. /*弹窗主体*/
7. .modal-content {
8. position: fixed;
9. bottom: -285px;
10. left: 0;
11. width: 100%;
12. height: 285px;
13. margin-top: 5px;
14. background: #fff;
15. z-index: 999;
16. }

要点二、位移动画translateY

1. var animation = wx.createAnimation({
2. duration: 500,
3. timingFunction: 'ease-in-out',
4. });
5. this.animation = animation;
6. animation.translateY(-285).step();
7. this.setData({
8. animationData: this.animation.export(),
9. maskVisual: 'show'
10. });
11.  
12. <view animation="{{animationData}}" class="modal-content">

position文档出处

动画文档出处

附上完整代码：

js代码

1. cascadePopup: function() {
2. var animation = wx.createAnimation({
3. duration: 500,
4. timingFunction: 'ease-in-out',
5. });
6. this.animation = animation;
7. animation.translateY(-285).step();
8. this.setData({
9. animationData: this.animation.export(),
10. maskVisual: 'show'