本文实例为大家分享了微信小程序自定义对话框弹出和隐藏动画的具体代码，供大家参考，具体内容如下

index.js

//索引。jsvar app=GetApp()；让动画显示高度=300页面({ data:{ animationData: ' '，showModalStatus:false，imageHeight:0，imageWidth:0 }，imageLoad:函数{这个。setdata({ image height : e . detail。高度，图像宽度： e。细节。宽度})；}，showModal:函数(){ //显示遮罩层var动画=wx。createanimation({持续时间： 200，timingFunction: ' linear '，延迟： 0 })这。动画=动画。动画显示高度.这一步。setdata({ animationData:)动画。export()、showmodalstatus 3360 true })setTimeout()函数(){动画。translatey(0)).这一步。setdata({ animationData:)动画。export()})} .bind(this)，200) }，hideModal:函数(){ //隐藏遮罩层var动画=wx。创建动画({持续时间： 200，timingFunction: ' linear '，延迟： 0 })这一点。动画=动画；动画。平移这一步。setdata({ animationData:)动画。export()，})setTimeout()函数(){动画。translatey(0)).这一步。setdata({ animationData:)动画。export()、showmodalstatus 3360 false })} .bind(this)，200) }，onshow : function(){ let that=this；wx。getsystem info({ success : function(RES){ animationShowHeight=RES . window height；} }) }，})index.wxml

！索引。wxml-view class=' container-column ' view animation=' { { animationData } } ' class=' container-column buy des-dialog-container ' wx : if=' { { showModalStatus } } ' view class=' buy des-dialog-container-top ' bind tap=' hideModal '/view class=' container-column buy des-dialog-container-bottom ' block wx 333: for=' { {['操作1','操作2','操作3','取消]} wx : for-index=' index ' wx : key=' key ' wx : for-item=' item ' view bind tap=' hide modal ' class=' buy des-dialog-container-bottom-item ' { item } }/view/block/view/view image bind tap=' show modal ' bind load=' imageLoad ' style=' width : { { imageWidth } } px；height : { { imageHeight } } px ' src=' http :/pro1。jpg '/视图索引。页面样式表。购买des-dialog-container {宽度： 100%；高度： 100%;正义-内容：空格；背景-color:rgba(15，15，26，0.7)；位置：固定；z指数： 999；} .购买des-dialog-container-top { flex-grow : 1；} .购买des-dialog-container-bottom { display : flex；flex-grow : 0；} .购买des-dialog-container-bottom-item { padd :24 rpx；display : flex justice-内容中心：边框-底部： 1rpx实心# eeeeee}效果图：

下面是实际开发中的效果图，没有源码，但是原理和上面的是一样的，通过上面的演示学习加上平常的半铸钢钢性铸铁(铸造半钢)基础，完全可以做出下面的效果

源码下载：微信小程序自定义对话框弹出和隐藏动画

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。