如果案例有问题，可到QQ群找到今日相关压缩文件下载测试。
WXML:
class="cebian"> "{{animation}}"> class="cebian01"> class="cebian011">电话 class="cebian02"> class="cebian021">发布 class="cebian03"> class="cebian031">咨询 class="cebian04" bindtap="anniuhide"> "{{anniuimg}}" animation="{{animations}}">
WXSS:
.cebian {width: 50px;height: auto;display: flex;flex-direction: column;position: fixed;bottom: 60px;right: 20px;z-index: 10;overflow: hidden; } .anniu{position: relative;left: 50px; } .cebian01, .cebian02,.cebian03,.cebian04 {height: 50px;width: 50px;text-align: center;line-height: 50px;border-radius: 60px;color: #fff; } .cebian02,.cebian03,.cebian04{margin-top: 10px; } .cebian01{background-color: #50cb67; } .cebian02{background-color: #6785e5; } .cebian03{background-color: #ec4149; } .cebian04{background-color: #949494;position: relative; } .cebian04>image{width: 30px;height: 30px;position: relative;top: 10px;}
JS:
Page({data: {jiantous: false,anniuimg: '/picture/jiantou01.png',},/*右侧按钮部分效果*/onReady: function () {this.animation = wx.createAnimation();this.animations = wx.createAnimation()},anniuhide: function () {var leftjian = this.data.jiantous;if (leftjian == false) {this.animation.translate(50, 0).step();this.animations.rotate(180).translate(3,0).step();leftjian = true;} else {this.animation.translate(0, 0).step();this.animations.rotate(0).translate(0, 0).step();leftjian = false;}this.setData({animation: this.animation.export(),animations: this.animations.export(),jiantous: leftjian,});}, })
效果图：
