微信小程序商品筛选，侧方弹出动画选择页面教程

微信小程序商品筛选，侧方弹出动画选择页面，在一点点的零碎的时间里面写出来的代码，和前两篇效果结合出来的。点击按钮的同时，要实现这两个功能的叠加。
小程序动画animation向左移动效果
小程序点击按钮出现和隐藏遮罩层

效果是这样的:

demo是这样的：

wxml

2. 筛选
6. 用途
7.  
8. •  
   • 全部
   •  
   • 经济实惠型
   •  
   • 家用学习型
   •  
9. •  
   • 豪华发烧型
   •  
   • 疯狂游戏型
   •  
   • 商务办公型
   •  
10. •  
    • 经济实惠型
    •  
    • 家用学习型
    •  
11.  
12.  
15. 价格
16.  
17. •  
    • 全部
    •  
    • 经济实惠型
    •  
    • 家用学习型
    •  
18.  
19.  
20. •  
    • 豪华发烧型
    •  
    • 疯狂游戏型
    •  
    • 商务办公型
    •  
21.  
22.  
23. •  
    •  
    • 经济实惠型
    •  
    • 家用学习型
    •  
24.  
25.  
26.  
28. 重置
29. 完成
30.  
31.  
32.  
33.  
34.  
35.  
36.  
37.  

wxss

1. .isRuleShow {
2. display: block;
3. }
4.  
5. .isRuleHide {
6. display: none;
7. }
8. .float {
9. height: 100%;
10. width: 100%;
11. position: fixed;
12. background-color: rgba(0, 0, 0, 0.5);
13. z-index: 2;
14. top: 0;
15. left: 0;
16. /* margin-top:80rpx; */
17. }
18.  
19.  
20.  
21.  
22.  
23. .iconuse {
24. margin-left: 11rpx;
25. }
26.  
27. .iconprice {
28. margin-left: 11rpx;
29. }
30.  
31. .animation-element {
32. width: 580rpx;
33. height: 1175rpx;
34. background-color: #ffffff;
35. border: 1px solid #f3f0f0;
36. position: absolute;
37. right: -572rpx;
38. }
39.  
40.  
41.  
42. .useage {
43. height: 40rpx;
44. }
45.  
46. .useage li {
47. width: 177rpx;
48. margin: 12rpx 7rpx;
49. height: 70rpx;
50. line-height: 70rpx;
51. display: inline-block;
52. text-align: center;
53. border: 1px solid #f3f0f0;
54. border-radius: 15rpx;
55. font-size: 30rpx;
56. }
57.  
58. .buttom{
59. position: fixed;
60. bottom: 0;
61. }
62. .animation-reset{
63. float: left;
64. line-height: 2;
65. width: 260rpx;
66. margin: 15rpx 12rpx;
67. border: 1px solid #f3f0f0;
68. text-align: center;
69. }
70. .animation-button{
71. float: left;
72. line-height: 2;
73. width: 260rpx;
74. margin: 15rpx 12rpx;
75. border: 1px solid #f3f0f0;
76. text-align: center;
77. }

js

1. Page({
2. onReady: function () {
3. this.animation = wx.createAnimation()
4. },
5. translate: function () {
6. this.setData({
7. isRuleTrue: true
8. })
9. this.animation.translate(-245, 0).step()
10. this.setData({ animation: this.animation.export() })
11. },
12.  
13. success: function () {
14. this.setData({
15. isRuleTrue: false
16. })
17. this.animation.translate(0, 0).step()
18. this.setData({ animation: this.animation.export() })
19. },
20. tryDriver: function () {
21. this.setData({
22. background: "#89dcf8"
23. })
24. }
25. })

ok完成了，今天再说一点，有人问我关于技术博客日更的事情，一来是参加了简书的日更活动，不想断开，二来是一路走来，能看见自己每天学习到的知识点和解决的问题，所以才会感到很充实，不会觉得自己每天在空空度日。如果你也想坚持一件事情，可以私聊我，我们相互监督，互相帮助，让自己变得更好。记录工作中所所思所见，对于博客上面有不会的问题，可以加入qq群聊来问。