在Ant Design Vue 的Popconfirm组件中使用TransitionGroup 的 bug 和解决方案

代码template如下

<template>
  <a-popconfirm trigger="click" placement="leftTop" :icon="null" overlay-class-name="my-popover">
    <template #description>
      <a-space>
        <a-button @click="insert">随机插入</a-button>
        <a-button @click="reset">重置</a-button>
        <a-button @click="shuffle">排序</a-button>
      </a-space>

      <TransitionGroup name="fade" class="container" tag="ul">
        <li v-for="item in items" :key="item">
          {{ item }}

          <a-button type="link" danger @click="remove(item)">移除</a-button>
        </li>
      </TransitionGroup>
    </template>
    <a-button>popover 里面的动画示例</a-button>
  </a-popconfirm>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const getInitialItems = () => [1, 2, 3, 4, 5];
const items = ref(getInitialItems());
let id = items.value.length + 1;

function insert() {
  const i = Math.round(Math.random() * items.value.length);
  items.value.splice(i, 0, id++);
}

function reset() {
  items.value = getInitialItems();
  id = items.value.length + 1;
}

function remove(item: number) {
  const i = items.value.indexOf(item);
  if (i > -1) {
    items.value.splice(i, 1);
  }
}

function shuffle() {
  items.value = items.value.sort(() => Math.random() - 0.5);
}
</script>
<style scoped lang="scss">
/* 1. 声明过渡效果 */
.fade-move,
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

/* 2. 声明进入和离开的状态 */
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scaleY(0.01) translate(30px, 0);
}

/* 3. 确保离开的项目被移除出了布局流
      以便正确地计算移动时的动画效果。 */
.fade-leave-active {
  position: absolute;
}
</style>

第一次打开popconfirm的时候，效果和我想的一样，TransitionGroup 里面的内容安安静静的在它该在的地方。
但是后面再次打开popconfirm时，TransitionGroup 里面的内容从其他地方动画移进出现在弹框中。

这个动画问题，设置 destroyTooltipOnHide =true 属性后依然会存在。
经过多次想方设法的排查bug以后，发现了问题。

Ant Design Vue 的Popconfirm组件在切换open的时候，自己会加一组动画（动画的内容我就不阐述了，好奇的可以自己去看官方代码），实现组件的丝滑显示不显示的效果，对其所有元素生效。而我自己的写的TransitionGroup内容，加了css过渡延迟，二者叠加，出现了我不想要的效果，也就是我认为的bug。

解决方案

<style lang="scss">
/** 在popconfirm组件的动画效果之外，执行我自己的动画 */
.my-popover:not([class*='ant-zoom']) {
  /* 1. 声明过渡效果 */
  .fade-move,
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  }

  /* 2. 声明进入和离开的状态 */
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
    transform: scaleY(0.01) translate(30px, 0);
  }

  /* 3. 确保离开的项目被移除出了布局流
      以便正确地计算移动时的动画效果。 */
  .fade-leave-active {
    position: absolute;
  }
}
</style>

如果在popover ，modal，drawer中出现了类似的动画bug,也可以尝试一下这个解决方案