【实战记录】手撸自定义dialog弹出框动画效果
背景： 最近在使用animate.css，遇到一种场景：A元素消失后，B元素显示，于是代码如下： <!-- A元素 -->
<div :class="Show ? 'video-wrapper animate__animated animate__fadeIn': 'video-wrapper animate__animated animate__fadeOut'" v-if="Show">
// todo
</div>
<!-- B元素 -->
<div class="animate__animated animate__fadeInUpBig" v-else>
// todo
</div>
表现为：A元素页面刚渲染时，动画效果正常，将show设置为false时，B元素动画效果正常；但A元素消失缺没有淡出的效果。 分析： 经过一顿挣扎以后，想起16年刚入门小程序时，当初自己写弹框动画效果与改场景很相似；问题表现为A元素消失动画效果不生效，由于动画效果皆需要一定的延时，这里使用v:if将show改为false时，dom已被销毁，故需要将判断dom显示与隐藏，和判断动画显示与消失的字段需要区分开来。 具体实现： 以手写dialog为例： index.wxml <button catchtap="openDialog">打开弹框</button>
<view class="{{ maskShowClass ? 'mask maskShow' : 'mask' }}" wx:if="{{maskShow}}"></view>
<view class="{{ dialogShowClass ? 'dialog dialogShow' : 'dialog' }}" wx:if="{{dialogShow}}">
<view class="dialog-title">提示</view>
<view class="dialog-content">弹框动画效果演示</view>
<view class="dialog-footer">
<view class="dialog-btn">取消</view>
<view class="dialog-btn dialog-confirm" catchtap="closeDialog">确认</view>
</view>
</view>
index.wxss .mask{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 1;
opacity: 0;
transition: opacity 0.3s;
}
.maskShow{
opacity: 1;
}
.dialog{
position: fixed;
width: 600rpx;
bottom: -200rpx;
left: 50%;
transform: translate(-50%, 50%);
transition: bottom 0.3s;
z-index: 2;
background-color: #fff;
border-radius: 8rpx;
}
.dialogShow{
bottom: 50%;
}
.dialog-title{
padding: 20rpx;
text-align: center;
font-size: 32rpx;
font-weight: bold;
}
.dialog-content{
padding: 30rpx 30rpx 50rpx 30rpx;
text-align: center;
color: #666;
}
.dialog-footer{
border-top: 1rpx solid #Efefef;
display: flex;
}
.dialog-btn{
flex: 1;
text-align: center;
padding: 20rpx 0;
}
.dialog-confirm{
border-left: 1rpx solid #Efefef;
color: #07c160;
}
index.js Page({
data: {
maskShowClass: false,
maskShow: false,
dialogShowClass: false,
dialogShow: false
},
openDialog() {
this.setData({
maskShow: true,
dialogShow: true,
}, () => {
setTimeout(() => {
this.setData({
maskShowClass: true,
dialogShowClass: true
})
}, 300)
})
},
closeDialog() {
this.setData({
maskShowClass: false,
dialogShowClass: false,
}, () => {
setTimeout(() => {
this.setData({
maskShow: false,
dialogShow: false
})
},300)
})
}
})
代码片段：https://developers.weixin.qq.com/s/MS2gvEme71A7 小结： 此篇仅为记录在开发调试某些动画效果时，需考虑动画结束后，再将dom或者小程序节点删除。上面含代码片段，若众佬们有更好建议，欢迎指正~
