常州微信小程序列表筛选，侧方弹出动画页面

demo是如许的：
wxml

<view class="">
<view class="animation-button" bindtap="translate">选取</view>
<view class="float {{isRuleTrue?'isRuleShow':'isRuleHide'}} ">
<view class="animation-element" animation="{{animation}}">
<view class='use'>
<view class='iconuse'>常州网站开发培训</view>
<ul class="useage">
<li bindtap="tryDriver" style="background:{{background}};">常州企业培训</li>
<li>网站开发</li>
<li>软件设计</li>
</ul>
<ul class="useage">
<li bindtap="tryDriver" style="background:{{background}};">软件技术培训</li>
<li>C++</li>
<li>php</li>
</ul>
<ul class="useage">
<li>微信平台运营</li>
<li>App平台运营</li>
</ul>
</view>

<view class='use'>
<view class='iconprice'>常州微信公众平台价格</view>
<ul class="useage">
<li bindtap="tryDriver" style="background:{{background}};">微信小程序开发</li>
<li>实用型</li>
<li>豪华型</li>
</ul>
<ul class="useage">
<li bindtap="tryDriver" style="background:{{background}};">网站开发建设</li>
<li>实用型</li>
<li>豪华型</li>
</ul>
<ul class="useage">
<li>实用型</li>
<li>豪华型</li>
</ul>
</view>
<view class='buttom'>
<view class="animation-reset" >返回</view>
<view class="animation-button" bindtap="success">完成</view>
</view>
</view>
</view>
</view>

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 #f30;
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 #f30;
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 #f30;
text-align: center;
}
.animation-button{
float: left;
line-height: 2;
width: 271rpx;
margin: 15rpx 12rpx;
border: 1px solid #f30;
text-align: center;
}

Page({
onReady: function () {
this.animation = wx.createAnimation()
},
translate: function () {
this.setData({
isRuleTrue: true
})
this.animation.translate(-258, 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: "#567"
})
}
})

<p font-size:16px;background-color:#f9f9f5;"="" style="overflow-wrap: break-word; margin: 5px 0px; font-family: "sans serif", tahoma, verdana, helvetica; color: rgb(44, 62, 80);">ok完毕了，即日再说一点，有人问尔闭于技巧专客日更的处事，一来是参与了幻天的日更运动，没有想断启，两来是一路走来，能瞅睹本人天天进修到的常识点和处置的问题，所以才会感触很充足，没有会感触本人天天在空空过活。假如你也想保持一件处事，不妨私聊尔，咱们相互监视，相互帮帮，让本人变得更佳。
上篇：上一篇：常州微信小程序开发-游戏生成六角多边形
下篇：下一篇：javascript array的排序（sort,bubble）