盒子底部hover时出现闪烁故障，请求代码排查与修复

核心原因分析 #

闪烁故障本质是hover事件的频繁触发循环：从底部hover时，盒子展开/收起的动画改变了元素边界，导致鼠标瞬间脱离目标元素触发mouseleave，动画回退时鼠标又重新进入触发mouseenter，反复交替就出现闪烁，甚至只显示图片的异常。

修复步骤 #

1. 用固定触发区域解决hover边界问题（关键修复） #

底部hover出问题，大概率是盒子收起时的底部区域在展开后被移出鼠标范围。给盒子加一个透明固定尺寸的父容器，把hover事件绑定在父容器上，而非动态变化的盒子本身：

<!-- 新增固定尺寸的父容器 -->
<div class="box-container">
  <div class="product-box" id="box">
    <img src="product.jpg" id="productImg" style="opacity: 0;">
  </div>
</div>

.box-container {
  width: 200px;
  height: 300px; /* 等于盒子展开后的最大高度 */
  position: relative;
}

.product-box {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px; /* 初始收起高度 */
  background: #eee;
  overflow: hidden;
}

// 事件绑定到固定的父容器
const container = document.querySelector('.box-container');
container.addEventListener('mouseenter', expandBox);
container.addEventListener('mouseleave', collapseBox);

这样不管盒子怎么动画，hover触发区域始终固定，不会因为盒子尺寸变化导致鼠标脱离，从任何方向hover都不会触发循环闪烁。

2. 禁用动画过程中的事件触发 #

在动画开始时暂时移除事件监听，完成后重新绑定，避免动画过程中事件反复触发：

function expandBox() {
  // 先解绑事件防止重复触发
  container.removeEventListener('mouseenter', expandBox);
  container.removeEventListener('mouseleave', collapseBox);
  
  gsap.to(box, {
    height: '300px',
    duration: 0.3,
    onComplete: () => {
      // 动画结束后重新绑定
      container.addEventListener('mouseenter', expandBox);
      container.addEventListener('mouseleave', collapseBox);
    }
  });
  gsap.to(productImg, { opacity: 1, duration: 0.3 });
}

function collapseBox() {
  container.removeEventListener('mouseenter', expandBox);
  container.removeEventListener('mouseleave', collapseBox);
  
  gsap.to(box, {
    height: '100px',
    duration: 0.3,
    onComplete: () => {
      container.addEventListener('mouseenter', expandBox);
      container.addEventListener('mouseleave', collapseBox);
    }
  });
  gsap.to(productImg, { opacity: 0, duration: 0.3 });
}

3. 用GSAP的overwrite避免动画冲突 #

如果存在多个动画实例同时作用于同一元素，添加overwrite: true终止之前的动画，防止状态混乱：

gsap.to(box, {
  height: '300px',
  duration: 0.3,
  overwrite: true, // 终止当前元素上的其他GSAP动画
  onComplete: () => { /* 重新绑定事件 */ }
});

验证建议 #

优先尝试添加固定父容器绑定hover事件，这是解决底部hover闪烁最直接的方案，再配合事件禁用和overwrite参数，能彻底解决动画冲突问题。

内容的提问来源于stack exchange，提问作者saribcantcode