Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.3k views
in Technique[技术] by (71.8m points)

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

实现效果,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;
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...