容器悬停显示按钮时出现抖动问题，寻求优化实现方案

嘿，我看了你的实现代码，发现几个会导致按钮抖动、过渡不流畅的核心问题：

1. 频繁的DOM创建/移除：你在每次mouseenter时都重新创建按钮，mouseleave又移除它，这种频繁的DOM操作很容易引发渲染抖动，甚至出现多个按钮残留的情况。
2. 定时器与过渡效果冲突：你给按钮显隐、位置切换加了多个不同时长的定时器，这些异步操作很容易打乱动画时序，导致按钮出现突兀的跳动。
3. 位置计算与过渡的冲突：mousemove里动态切换过渡时长为0s，再加上直接赋值坐标，会让按钮位置更新时出现生硬的跳跃感。

下面给你一个优化后的方案，核心思路是减少DOM操作、用CSS统一管理动画、简化JS逻辑，让按钮的显隐和跟随更流畅：

优化步骤拆解 #

• 提前在容器内放置按钮（只创建一次），默认隐藏
• 用CSS的opacity+scale控制按钮显隐，统一配置过渡效果
• 简化JS逻辑，只处理按钮跟随鼠标移动的位置计算，加入边界限制避免按钮超出容器

完整实现代码 #

HTML部分

<div class="teaser-unter">
  <div class="teaser-img">
    <img src="https://www.landtiere.de/bilder/2022/10/20/91863382/30102822-eichhoernchen-superheld-luft-2iyGCm7LNlBG.jpg" width="500" height="auto">
    <!-- 提前加入按钮，默认隐藏 -->
    <div class="morebutton">mehr lesen</div>
  </div>
</div>

CSS部分（关键：用CSS统一管理动画）

.teaser-img {
  position: relative;
  overflow: hidden; /* 防止按钮超出容器范围 */
  cursor: pointer;
}

.morebutton {
  position: absolute;
  /* 默认隐藏状态 */
  opacity: 0;
  scale: 0;
  /* 统一设置所有属性的过渡效果，保证动画流畅 */
  transition: all 0.3s ease-in-out;
  padding: 8px 16px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  pointer-events: none; /* 隐藏时不干扰鼠标事件 */
}

/* 容器hover时触发按钮显示动画 */
.teaser-img:hover .morebutton {
  opacity: 1;
  scale: 1;
  pointer-events: auto;
}

JS部分（只处理按钮跟随逻辑）

const teaserImgs = document.querySelectorAll('.teaser-img');

teaserImgs.forEach(element => {
  const moreButton = element.querySelector('.morebutton');
  
  element.addEventListener('mousemove', (e) => {
    const containerRect = element.getBoundingClientRect();
    // 计算按钮相对于容器的位置，减去自身一半尺寸让鼠标对准按钮中心
    const btnHalfWidth = moreButton.offsetWidth / 2;
    const btnHalfHeight = moreButton.offsetHeight / 2;
    let x = e.clientX - containerRect.left - btnHalfWidth;
    let y = e.clientY - containerRect.top - btnHalfHeight;
    
    // 限制按钮不能超出容器边界
    const maxX = containerRect.width - moreButton.offsetWidth;
    const maxY = containerRect.height - moreButton.offsetHeight;
    x = Math.max(0, Math.min(x, maxX));
    y = Math.max(0, Math.min(y, maxY));
    
    moreButton.style.left = `${x}px`;
    moreButton.style.top = `${y}px`;
  });
});

优化后的优势 #

• DOM操作最小化：按钮只创建一次，避免了频繁添加/移除DOM导致的性能损耗
• 动画更稳定：所有过渡效果由CSS统一管理，不会出现JS定时器打乱时序的问题
• 交互更自然：加入边界限制，按钮不会跑出容器，鼠标对准按钮中心的计算让跟随更顺滑

如果想要按钮出现的动画更柔和，还可以调整CSS里的transition-timing-function，或者把scale的初始值改成0.8，让动画有一个更自然的缓冲~

备注：内容来源于stack exchange，提问作者fevo2