vue transition-group没有执行离开动画是代码哪里有问题吗？

Question

实现效果，museui那种点击之后的水波纹。

museui是用transition实现的，我用vue2实现过，是正常使用的。现在学习vue3，transition和transition-group都试过了，但是效果错误。

理论上，鼠标按下添加元素，松开之后移除。由于数组移除了元素，要执行离开动画，也就是transform逐渐变成scale(1)，opacity逐渐变成0。

现在的效果是鼠标按下添加元素，可以看到一个水波纹逐渐变大。但是松开后，动画不执行，元素直接移除了。如果鼠标保持按下，水波纹会逐渐变大到scale(1)，但是松开后也不会执行离开动画，直接移除了。

下面是代码，是不是哪里写的有问题。首先是事件处理

const startCalc = e => {
  ripples.push({
    key: Date.now(),
    style: getRippleStyle(e)
  });
};
const endCalc = () => {
  if (ripples.length === 0) return;
  ripples.splice(0, 1);
};
const handlers = {
  onMousedown: e => {
    if (e.button === 0) startCalc(e);
  },
  onMouseup: endCalc,
  onMouseleave: endCalc
};

然后是render函数。render代码只放transition-group这一段的，外面还有一层包裹的div是会绑定上面handlers的。

h(TransitionGroup, {
  tag: 'div',
  name: 'v3l-ripple',
  class: ['v3l-ripple-box']
}, {
  default: () => ripples.map(ripple => h('div', {
    class: ['v3l-ripple'],
    key: ripple.key,
    style: {
      ...ripple.style,
      backgroundColor: props.color,
      opacity: props.opacity
    }
  }))
})

最后是css

.v3l-ripple-enter-from {
  transform: scale(0);
}
.v3l-ripple-enter-active,
.v3l-ripple-leave-active,
.v31-ripple-move {
  transition: all 0.45s;
}
.v3l-ripple-leave-active {
  opacity: 0 !important;
}

Answer 1

等待大神解答