tooltip中transition动画效果bug

来源：8-7 Tooltip 编码第五部分 - 添加 popper 参数以及动画效果

慕粉3710314

2024-01-06

老师你好，我在8-7 Tooltip 编码第五部分 - 添加 popper 参数以及动画效果这一节课程中，遇到transition消失动画bug。具体表现为，手动关闭tooltip，对应的popper提示会出现在底部一下，然后消失。即使设置placement: 'right'|'left'|'top'，popper均会在底部出现，然后消失。
本人gitee链接 https://gitee.com/ChaoYuanQiZero/v-element

写回答

2回答

张轩

2024-01-08

已采纳

同学你好

经过长时间的查找，发现了具体的原因

// 代码100行，好像是新版本
popperInstance?.destroy() 的问题，延时的动画让它出现了问题，具体原因未知，我们可以加一个延时，
// 确保所有动画结束以后在执行这个操作
setTimeout(() => {
    popperInstance?.destroy()
}, props.closeDelay + 50)

亲测有效

慕粉3710314

非常感谢！解决了问题。

2024-01-08

共1条回复

张轩

2024-01-07

同学你好

谢谢反馈，明天上班的时候我帮你看一下，谢谢。

进阶必学，打造媲美ElementPlus的组件库

Vue3.3 + TS4 ，自主打造媲美 ElementPlus 的组件库

481 学习 · 218 问题