在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,也可以尝试一下这个解决方案