CSS Transition首次触发无效果问题求助

我来帮你搞定这个问题——首次鼠标移入方块没过渡，只有后续才生效的核心原因很明确，咱们一步步解决：

问题根源 #

你的方块初始状态下left和top是浏览器默认的auto值，第一次给它设置具体的px坐标时，浏览器会把「初始auto状态」和「新px状态」合并成一次布局重绘，直接跳到目标位置，不会触发过渡动画。哪怕把transition移到CSS里，只要初始位置是auto，首次过渡还是会失效。

另外，你需要方块初始居中且移动时不超出窗口，咱们一起把这些需求都满足。

修复方案 #

1. 给方块设置明确的初始位置（CSS） #

在.second的CSS里添加明确的left和top值，让它初始居中，同时提前设置transition属性：

* { margin: 0; padding: 0; }
main { height: 100vh; display: flex; justify-content: center; align-items: center; position: relative; }
.second {
  height: 200px;
  width: 200px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 初始居中：用calc计算，确保left/top是明确数值而非auto */
  left: calc(50vw - 100px);
  top: calc(50vh - 100px);
  /* 提前设置过渡效果，避免JS动态添加的时序问题 */
  transition: left 2s, top 2s;
}

2. 简化JS代码，只修改坐标 #

JS里不需要再动态添加transition了，只负责计算随机坐标即可，同时用元素自身的宽高代替硬编码的200，更灵活：

document.addEventListener("DOMContentLoaded", function() {
  const square = document.querySelector('.second');
  if (square) {
    square.addEventListener("mouseenter", function() {
      // 计算最大可移动范围：窗口尺寸减去方块自身宽高，确保不超出
      const maxX = Math.floor(Math.random() * (window.innerWidth - this.offsetWidth));
      const maxY = Math.floor(Math.random() * (window.innerHeight - this.offsetHeight));
      this.style.left = `${maxX}px`;
      this.style.top = `${maxY}px`;
    });
  }
});

为什么这样有效？ #

• 明确的初始left/top值给过渡提供了清晰的起点，第一次修改坐标时，浏览器能识别到状态变化，触发过渡动画。
• 把transition写在CSS里，确保元素从页面加载时就具备过渡属性，避免了JS动态添加时可能出现的渲染时序问题。
• 用this.offsetWidth代替硬编码值，就算以后修改方块尺寸，JS部分也不用跟着改，更健壮。

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