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

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
})
},

效果图