本文详解如何让 CSS transform: scale() 动画严格从鼠标点击坐标（clientX/clientY）开始，解决因过渡属性误配导致的“变换原点偏移”问题，并提供可直接运行的修复方案。
本文详解如何让 css `transform: scale()` 动画严格从鼠标点击坐标（`clientx/clienty`）开始，解决因过渡属性误配导致的“变换原点偏移”问题，并提供可直接运行的修复方案。
在实现点击处局部放大的视觉效果（如模态层、提示浮层或焦点动画）时，一个常见需求是：让缩放动画真正“始于鼠标点击点”。但许多开发者会发现，尽管设置了 transform-origin 为鼠标坐标，动画却仍从左上角或中心“滑动+缩放”，而非干净利落地以点击点为中心向外展开。
根本原因在于 CSS 过渡（transition）的默认行为：当未显式限定过渡属性时（例如仅写 transition: 0.8s linear），浏览器会对所有可动画的 CSS 属性（包括 opacity、visibility、transform，甚至隐式触发的 top/left 重排）进行过渡。而 .pageOverlay 的初始定位是 position: fixed; top: 0; left: 0，当 transform-origin 动态改变后，若 opacity 或 visibility 同步过渡，会导致浏览器在动画帧中混合处理布局重绘与变换，从而破坏 transform-origin 的预期锚定效果——视觉上表现为“先位移再缩放”，而非“原地爆发式缩放”。
✅ 正确解法是：仅对 transform 属性启用过渡，其他状态（如显示/隐藏、透明度）应瞬时切换。
以下是优化后的完整实现：
立即学习“前端免费学习笔记（深入）”；
<span id="hint">Click somewhere!<br/><br/> I want/expect the transformation to start at the mouse position.</span> <div id="pageOverlay" class="pageOverlay"> <h1>Overlay</h1> </div>
.pageOverlay {
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background: lightblue;
opacity: 0;
visibility: hidden;
/* 关键修复：只过渡 transform，避免 opacity/visibility 干扰 */
transition: transform 0.8s linear;
/* 初始缩放值需小于 1（如 0.2），确保动画有“展开感” */
transform: scale(0.2);
}let x, y;
const hint = document.getElementById('hint');
const pageOverlay = document.getElementById('pageOverlay');
document.addEventListener("DOMContentLoaded", () => {
// 实时记录鼠标位置（推荐使用事件委托或节流，此处为简洁示例）
document.addEventListener("mousemove", (e) => {
x = e.clientX;
y = e.clientY;
});
document.addEventListener("click", (e) => {
console.info(`Clicked at ${x}, ${y}`);
hide(hint);
expand(pageOverlay, x, y);
});
});
function hide(elm) {
// 瞬时隐藏，不参与过渡
elm.style.visibility = "hidden";
elm.style.opacity = "0";
}
function expand(elm, originX, originY) {
// ⚠️ 注意：transform-origin 坐标需相对于元素自身坐标系
// 因为 pageOverlay 是 fixed 全屏元素，clientX/clientY 可直接使用
elm.style.transformOrigin = `${originX}px ${originY}px`;
elm.style.visibility = "visible";
elm.style.opacity = "1";
// 触发 scale 动画（transition 仅作用于 transform）
elm.style.transform = "scale(1)";
}? 关键注意事项：
-
transform-origin的单位必须是像素（px），且坐标值应为绝对屏幕坐标（clientX/clientY）——这对position: fixed元素完全适用； - 若目标元素非全屏或存在滚动容器，需将
clientX/clientY转换为相对于该元素的偏移（例如减去getBoundingClientRect().left/top）； -
visibility和opacity必须在expand()中立即设置（而非通过 transition），否则会与transform动画竞争，导致原点漂移； - 为提升性能，建议用
requestAnimationFrame封装expand()中的样式设置，或改用 CSS 自定义属性 +@keyframes实现更可控的动画。
最终效果：点击任意位置，蓝色遮罩层将瞬间出现在视口内，并严格以点击点为圆心，平滑放大至全屏——真正实现“所点即所绽”的精准交互动效。
