鼠标点击位置启动CSS变换失效问题排查与解决

希望页面被点击时，pageOverlay元素从鼠标点击位置开始执行scale变换（从0.2放大到1），但当前代码未达到预期效果，请问失效原因是什么？该如何修改？

原代码 #

HTML #

<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>

CSS #

.pageOverlay {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: lightblue; 
  opacity: 0;
  visibility: hidden;  
  transition: 0.8s linear;
  transform: scale(.2);
}

JavaScript #

var x, y;
const hint = document.getElementById('hint');
const pageOverlay = document.getElementById('pageOverlay');

document.addEventListener("DOMContentLoaded", () => {

  document.addEventListener("click", (e) => {
    console.info('clicked at ' + x + ', ' + y);
    hide(hint);
    expand(pageOverlay);
  });

  document.onmousemove = function (e) {
    x = e.clientX;
    y = e.clientY;
  };
});

function hide(elm) {
  elm.setAttribute("style", "visibility: hidden; opacity: 0");
}

function expand(elm) {
  elm.setAttribute("style", 
   "transform-origin:" + x + "px " + y + "px;" +
   "visibility: visible;" +
   "opacity: 1;" +
   "transform: scale(1)");
}

1. transform-origin设置时机错误：点击后同时设置变换原点和缩放状态，浏览器会将这两个样式变更合并处理，无法识别出“以点击位置为原点，从scale(0.2)放大到1”的过渡逻辑，直接跳转到最终状态，导致动画不符合预期。
2. 内联样式覆盖风险：用setAttribute("style")直接替换所有内联样式，写法生硬，容易干扰CSS中定义的过渡规则，也不利于后续维护。
3. 冗余的坐标获取逻辑：依赖mousemove事件记录坐标完全没必要，点击事件本身就能直接获取鼠标位置，反而可能出现坐标不匹配的问题。

核心思路是先设置transform-origin并让浏览器确认这个原点，再触发缩放动画，确保过渡过程基于点击位置执行。

修改后的代码 #

HTML（无改动） #

<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>

CSS（新增激活类，优化过渡逻辑） #

.pageOverlay {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: lightblue; 
  opacity: 0;
  visibility: hidden;  
  transition: all 0.8s linear;
  transform: scale(.2);
}

/* 用类控制激活状态，清晰分离初始与目标样式 */
.pageOverlay.active {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}

JavaScript（调整逻辑顺序，优化坐标获取） #

const hint = document.getElementById('hint');
const pageOverlay = document.getElementById('pageOverlay');

document.addEventListener("DOMContentLoaded", () => {
  document.addEventListener("click", (e) => {
    hide(hint);
    // 第一步：设置变换原点为点击位置
    pageOverlay.style.transformOrigin = `${e.clientX}px ${e.clientY}px`;
    // 强制浏览器触发重绘，确保原点设置生效
    void pageOverlay.offsetWidth;
    // 第二步：触发缩放动画
    expand(pageOverlay);
  });
});

function hide(elm) {
  elm.style.visibility = 'hidden';
  elm.style.opacity = '0';
}

function expand(elm) {
  elm.classList.add('active');
}

关键修改说明 #

• 先确认原点再动画：通过void pageOverlay.offsetWidth强制浏览器重绘，让它先识别新的transform-origin，再执行缩放过渡，确保动画从点击位置开始。
• CSS类控制状态：避免内联样式覆盖问题，样式逻辑更清晰，后续扩展也更方便。
• 直接获取点击坐标：去掉冗余的mousemove监听，直接从点击事件中获取鼠标位置，准确又高效。

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