背景：

最近在使用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或者小程序节点删除。上面含代码片段，若众佬们有更好建议，欢迎指正~