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

微信小程序动画原文档地址

动画api 请求参数

timingFunction 有效值：

wxss

.animation{
   background: rgba(0,0,0,0.2); 
  /* background: #000; */
  z-index: 999;
  float: left;
  right: -100vh;//动画初始前向右移100vh
  width: 100%;
  height: 100%;
}
.animation-content{
  width: 80%;
  height: 100%;
  background: #fff;
  position: absolute;
  right: 0;
}

wxml代码

<view class='animation' animation="{{animationData}}" style="height:100%;position:fixed;visibility:{{show ? 'visible':'hidden'}}">
  <view class='animation-content'>
    <view class='pricezone'>
      <view class='pztitle'>
        <text>价格区间（元）text>
      view>
      <view class='inputzone'>
        <input type='digit'  bindinput="bindKeyInput" placeholder="最低价"/>
        <text style='color:#ddd'>-text>
        <input type='digit'  bindinput="bindKeyInput" placeholder="最高价"/>
      view>
    view>

  view>

js代码

    filter:function(e){ //点击筛选事件
    var animation = wx.createAnimation({//创建动画
      duration: 1000,
      timingFunction: 'ease',
      width:300,
      height:800,
      top:0,
      bottom:0,
      right:0,
      backgroundColor:'#fff',
      opcity:0.5
    })

    this.animation = animation

    animation.translateX(-100 + 'vh').step() //动画效果向右滑动100vh

    this.setData({
      animationData: animation.export(),
      show:true
    })
  },

效果图

欢迎加群讨论：群号578385176