css `transition` 首次不生效，是因为目标元素缺少初始 `top`/`left` 值，浏览器无法计算属性变化起点；只需在 css 中显式声明初始定位值即可解决。
在使用 CSS transition 实现元素平滑位移（如点击移动小球）时，一个常见却易被忽视的问题是：首次点击时位置突变、无动画，而后续点击才正常过渡。根本原因在于：transition 仅在元素的可动画 CSS 属性发生有效变化时触发，而该变化必须是从一个明确的起始值 → 明确的目标值。
在你的代码中，#ball 元素初始未设置 top 和 left，其计算值为 auto（非数值），而 javaScript 动态设置 elem.style.top = ‘XXpx’ 时，浏览器会将 auto → XXpx 视为“不可插值的变化”，因此跳过过渡，直接应用新值——这就是首次点击瞬间移动的原因。
✅ 正确做法：在 CSS 中为 top 和 left 提供明确的初始数值（即使为 0），确保 transition 起点可被识别：
#ball { width: 40px; height: 40px; position: absolute; top: 0; /* ✅ 关键：提供明确初始值 */ left: 0; /* ✅ 关键：提供明确初始值 */ transition: top 1s, left 1s; /* 推荐简写语法 */ }⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖 getComputedStyle(elem).top 或内联样式初始为空来“推断”位置——auto 不参与 transition；
- 若需让小球初始居中于容器，应通过 js 设置一次初始 top/left，或用 CSS transform: translate(-50%, -50%) 配合 left: 50%; top: 50% 实现，但 transition 仍需作用于 top/left 或 transform（推荐后者，性能更优）；
- 使用 transform 替代 top/left 进行动画是更佳实践（硬件加速、避免重排）：
#ball { width: 40px; height: 40px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 初始居中 */ transition: transform 1s ease; }对应 JS 更新逻辑也需调整为操作 transform（例如 elem.style.transform =translate(${x}px, ${y}px)`），但注意坐标需基于容器左上角重新计算。
总结：CSS transition 的可靠性始于明确的初始状态。永远不要假设“未设置 = 0”——显式声明初始值，是保障动画从第一次交互就丝滑运行的关键前提。