记录下项目中遇到的问题
先说功能 点击遮罩或者右上X使弹窗缩小(不能消失)同时还具有过渡效果

项目中使用的组件库是Vant 组件使用的是popup弹出层
首先是组件配置

   <van-popup v-model="testTag" @click-overlay="testClose" overlay-class="black-mask" :transition-appear="true" class="linkThe-greenSpeac-pay" :class="{ 'scale-active': clicktag }">
        <div class="wrapper">
          <div class="block">
            <p>
              感谢您对xxx的支持！
            </p>
            <p>
              关注xx，随时查看物流信息。
            </p>
            <p>
              更可第一时间参与福利活动。
            </p>
          </div>
          <div class="btn-box" @click="goFollow()">
            订阅商城
          </div>
          <div class="cancel-box" @click="testClose"></div> 
        </div>
      </van-popup>

1.click-overlay: 点击遮罩触发(问题： 挂载容器wrapper会在触发事件时消失 也就是弹出层消失了)
2.overlay-class=“black-mask” ： 遮罩自定义类名
3.:transition-appear=“true” ： 是否在初始渲染时启用过渡动画（最开始以为这个属性导致了元素的消失）
4.class=“linkThe-greenSpeac-pay” ： 元素类名
5.:class="{ ‘scale-active’: clicktag }"： 事件触发时添加的类名

关闭事件: 控制遮罩样式和元素样式动态绑定变量clicktag

   testClose() {
      let oMask = document.getElementsByClassName("black-mask")[0];
      oMask.setAttribute("class", "van-overlay black-mask scale-active");
      this.clicktag = true;
    },

CSS样式

.linkThe-greenSpeac-pay {
  display: flex !important;
  &.scale-active {
    transform: scale(0.3);
    transition: all 1s;
    left:-228px !important;
    top: 49% !important;
  }
  &.van-fade-leave-active {
    animation:unset !important;
  }
}
.black-mask {
  &.scale-active {
    display: none;
  }
}

最后问题的描述和解决方法

元素消失现象：

在放慢过渡速度 300s后 会发现元素的消失过程 元素在过渡这段时间内 元素被添加上了display:none，
发现问题后先是给渲染元素添加了 display: flex !important; block同理； 之后再点击遮罩时
元素还是在过渡时消失 但是在过渡结束后出现 。

解决： --------------------------- 👇

1.渲染元素添加 display: flex !important; block同理
2. click-overlay点击遮罩触发事件会给元素添加一个van-fade-leave-active的类名使用 animation:unset !important; 重置掉就好了

ps: 只有click-overlay事件会默认添加van-fade-leave-active类名 自己在元素内添加的事件并不会触发 例如click