微信小程序动画之消息框弹出，供大家参考，具体内容如下

上图

js:

页面({ data : { showmodalstatus 3360 false }，powerDrawer:函数{ var currentStatu=e .当前目标。数据集。地位；this.util(currentStatu) }，util:函数(currentStatu) { /*动画部分*///第一步：创建动画实例var动画=wx。createanimation({ duration :300//动画时长定时功能： '线性',//线性delay: 0 //0则不延迟});//第2步：这个动画实例赋给当前的动画实例this.animation=动画；//第3步：执行第一组动画动画。不透明度(0)。旋转(100)。step()；//第四步：导出动画对象赋给数据对象储存这个。setdata({ animationData:)动画。export()})//第5步：设置定时器到指定时候后，执行第二组动画setTimeout(函数(){ //执行第二组动画动画。不透明度(1)。rotateY(0).step()；//给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象这个。setdata({ animation data : animation })//关闭if(currentStatu==' close '){ this。setdata({ showmodalstatus 3360 false })；} }.绑定（本),200) //显示if(currentStatu==' open '){ this。setdata({ showmodalstatus 3360 true })；} }})wxml:

！-按钮-视图类=' BTN泡泡'绑定点击='电源抽屉'数据-状态='打开'登录/view！-mask-view class=' drawer _ screen ' bind tap=' powerDrawer ' data-status=' close ' wx : if=' { { showModalStatus } } '/view！-内容-!-使用动画属性指定需要执行的动画-查看动画=' { { animationData } } ' class=' drawer _ box ' wx : if=' { { showModalStatus } } '！-抽屉内容-视图类='抽屉_标题'消息框/view view class=' drawer _ content '/view view class=' BTN _ ok ' bind tap=' power drawer ' data-status=' close '确定/view/viewwxss:

/*按钮*/。BTN {宽度：80%；padd : 20 rpx 0；边界半径： 10 rpx文本对齐：中心；保证金： 40 rpx 10%；背景技术# 07c160color: # fff}/*屏蔽*/。抽屉_屏幕{宽度： 100%;高度： 100%;位置：固定；top : 0；左： 0；z指数： 1000；背景技术： # 000;opacity: 0.4飞越：隐藏；}/*内容*/。抽屉_盒子{ width: 650rpx飞越：隐藏；位置：固定；前：名50%；左： 0；z指数： 1001；背景# fafafamargin :-150 px 50 rpx 0 50 rpx；边界半径： 3px}.抽屉_标题{ padding: 15pxfont: 20px '微软雅黑；文本对齐：中心；}.文字{ font : 20px ' Microsoft ya hei '；文本对齐：中心；}.抽屉_内容{ height: 80px溢出-y:滚动；/*超出父盒子高度可滚动*/}.BTN _ ok { padd : 10pxfont : 20px '微软雅黑；文本对齐：中心；边框-top: 1px实心# e8e 8 acolor : # 3c 51f }。底部{填充-底部： 20px}.气泡{位置：相对；飞越：隐藏；} .bubble:after在{内容： }之后；背景技术： # 999;绝对位置：宽度： 750 rpx高度： 750 rpx左侧： calc(50%-375 rpx)；top : calc(50%-375 rpx)；opa城市3360 0；margin:汽车边界半径： 50%;变压器：比例尺(1);过渡：全0.4s轻松进出；} .气泡：活跃：在{ transform:刻度(0)之后；opa城市3360 1；transition:}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。