微信小程序商品筛选侧方弹出动画选择页面-所选商城小程序-网上商城小程序-即速应用

微信小程序商品筛选侧方弹出动画选择页面-所选商城小程序-网上商城小程序

浏览量：1767 时间：2020-04-01 来源：con_knife

1.微信小程序动画原文档地址
2.动画api请求参数
3.timingFunction有效值：
wxss.animation{background:rgba(0,0,0,0.2);/*background:#000;*/z-index:999;float:left;right:-100vh;//动画初始前向右移100vhwidth:100%;height:100%;}.animation-content{width:80%;height:100%;background:#fff;position:absolute;right:0;}wxml代码viewclass='animation'animation="{{animationData}}"style="height:100%;position:fixed;visibility:{{show?'visible':'hidden'}}"viewclass='animation-content'viewclass='pricezone'viewclass='pztitle'text价格区间（元）/text/viewviewclass='inputzone'inputtype='digit'bindinput="bindKeyInput"placeholder="最低价"/textstyle='color:#ddd'-/textinputtype='digit'bindinput="bindKeyInput"placeholder="最高价"//view/view/viewjs代码filter:function(e){//点击筛选事件varanimation=wx.createAnimation({//创建动画duration:1000,timingFunction:'ease',width:300,height:800,top:0,bottom:0,right:0,backgroundColor:'#fff',opcity:0.5})this.animation=animationanimation.translateX(-100+'vh').step()//动画效果向右滑动100vhthis.setData({animationData:animation.export(),show:true})},效果图
4.欢迎加群讨论：群号578385176