CSS缩放过渡动画中获取event.offset最终值的替代方案

要在CSS过渡动画期间获取元素最终状态下的鼠标偏移，核心思路是将当前动画帧的鼠标位置转换为元素初始状态下的相对位置，再结合目标变换参数计算最终位置。

实现步骤 #

1. 记录目标变换参数：比如点击按钮设置的目标缩放比例targetScale。
2. 解析当前动画帧的变换状态：通过getComputedStyle获取元素当前的transform矩阵，提取当前缩放比例。
3. 转换坐标：将当前鼠标相对于视觉元素的偏移，转换为初始状态下的相对坐标，再乘以目标缩放比例得到最终偏移值。

完整代码示例 #

<button onclick="onButton()">Zoom</button>
<br>
<img
    id='img'
    onclick="onImage(event)"
    src="https://picsum.photos/id/237/200"
    style="transition: 5s ease"
>

<script>
let targetScale = 1;
const img = document.querySelector('#img');

function onButton() {
    targetScale = 5.0;
    img.style.scale = targetScale;
}

function onImage(event) {
    const currentRect = img.getBoundingClientRect();
    const clientX = event.clientX;
    const clientY = event.clientY;
    const currentOffsetX = clientX - currentRect.left;
    const currentOffsetY = clientY - currentRect.top;
    
    // 解析当前缩放比例
    const transform = getComputedStyle(img).transform;
    let currentScale = 1;
    if (transform !== 'none') {
        if (transform.startsWith('matrix3d(')) {
            const values = transform.match(/matrix3d\((.*)\)/)[1].split(',').map(v => parseFloat(v.trim()));
            currentScale = values[0]; // 等比缩放时，X/Y/Z轴缩放值一致
        } else if (transform.startsWith('matrix(')) {
            const values = transform.match(/matrix\((.*)\)/)[1].split(',').map(v => parseFloat(v.trim()));
            currentScale = values[0]; // 2D缩放时，X轴缩放值
        }
    }
    
    // 计算初始状态相对坐标与最终偏移
    const initialRelX = currentOffsetX / currentScale;
    const initialRelY = currentOffsetY / currentScale;
    const finalOffsetX = initialRelX * targetScale;
    const finalOffsetY = initialRelY * targetScale;
    
    console.log('当前帧偏移:', event.offsetX, event.offsetY);
    console.log('最终状态偏移:', finalOffsetX.toFixed(2), finalOffsetY.toFixed(2));
}
</script>

扩展说明 #

• 非等比缩放：如果使用scaleX和scaleY分别设置不同缩放比例，只需提取矩阵中的values[0]（scaleX）和values[3]（scaleY），分别计算X/Y轴的初始相对坐标，再乘以对应的目标缩放值即可。
• 包含平移变换：如果元素同时有translate动画，需从矩阵中提取平移值（matrix的values[4]和values[5]，matrix3d的values[12]和values[13]），在计算初始相对坐标时扣除当前平移的影响，再结合目标平移值计算最终位置。

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