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

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

小程序动画animation向左移动效果：https://www.jianshu.com/p/1cdf36070205
小程序点击按钮出现和隐藏遮罩层：https://www.jianshu.com/p/1193bf63a87d

效果是这样的:

demo是这样的：
wxml

  筛选
  
    
      
        用途

        

          
全部
          
经济实惠型
          
家用学习型
        
        

          
豪华发烧型
          
疯狂游戏型
          
商务办公型
        
        

          
经济实惠型
          
家用学习型
        
      

      
      
        价格

        

          
全部
          
经济实惠型
          
家用学习型
        


        

          
豪华发烧型
          
疯狂游戏型
          
商务办公型
        


        


          
经济实惠型
          
家用学习型
        

      

      
      重置
      完成
      



    
  
 

wxss

.isRuleShow {
  display: block;
}

.isRuleHide {
  display: none;
}
.float {
  height: 100%;
  width: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  top: 0;
  left: 0;
  /* margin-top:80rpx; */
}





.iconuse {
  margin-left: 11rpx;
}

.iconprice {
  margin-left: 11rpx;
}

.animation-element {
  width: 580rpx;
  height: 1175rpx;
   background-color: #ffffff; 
  border: 1px solid #f3f0f0;
  position: absolute;
  right: -572rpx;
}



.useage {
  height: 40rpx;
}

.useage li {
  width: 177rpx;
  margin: 12rpx 7rpx;
  height: 70rpx;
  line-height: 70rpx;
  display: inline-block;
  text-align: center;
  border: 1px solid #f3f0f0;
  border-radius: 15rpx;
  font-size: 30rpx;
}

.buttom{
  position: fixed;
  bottom: 0;
}
.animation-reset{
float: left;
 line-height: 2;
  width: 260rpx;
  margin: 15rpx 12rpx;
  border: 1px solid #f3f0f0;
  text-align: center;
}
.animation-button{
float: left;
 line-height: 2;
  width: 260rpx;
  margin: 15rpx 12rpx;
  border: 1px solid #f3f0f0;
  text-align: center;
}

js

Page({
  onReady: function () {
    this.animation = wx.createAnimation()
  },
  translate: function () {
    this.setData({
      isRuleTrue: true
    })
    this.animation.translate(-245, 0).step()
    this.setData({ animation: this.animation.export() })
  },

  success: function () {
    this.setData({
      isRuleTrue: false
    })
    this.animation.translate(0, 0).step()
    this.setData({ animation: this.animation.export() })
  },
  tryDriver: function () {
    this.setData({
      background: "#89dcf8"
    })
  }
})

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

原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题，可以加入qq群聊来问我：473819131。