本文旨在解决在CSS缩放和过渡动画过程中，如何准确获取鼠标相对于最终缩放状态下元素的位置。通过引入一个辅助的不可见元素，并在其上监听点击事件，可以绕过过渡动画的影响，从而获得准确的偏移量。
在Web开发中，经常会遇到需要对元素进行缩放和过渡动画处理的场景。然而，当用户在动画过程中点击元素时，event.offsetX 和 event.offsetY 获取到的值是相对于动画当前帧的，而不是最终状态。这在某些需要基于最终状态进行计算的场景下会造成问题。本文将介绍一种通过引入辅助元素来解决该问题的方法。
问题分析
假设有一个图片元素，通过CSS过渡实现缩放动画。在动画过程中，如果用户点击图片，event.offsetX 和 event.offsetY 返回的是相对于图片当前大小和位置的偏移量。我们需要的是相对于图片最终大小和位置的偏移量，即动画完成后的偏移量。
解决方案：使用辅助元素
为了解决这个问题，我们可以引入一个不可见的辅助元素，该元素与图片元素大小相同，并覆盖在图片之上。辅助元素不应用过渡动画，而是直接缩放到最终状态。我们监听辅助元素的点击事件，并使用其 event.offsetX 和 event.offsetY 获取最终状态下的偏移量。
立即学习“Java免费学习笔记（深入）”；
HTML 结构:
@@##@@
- wrapper: 用于包含图片和辅助元素的容器。
- target: 辅助元素，用于接收点击事件。
- img: 图片元素，应用缩放和过渡动画。
CSS 样式:
#wrapper {
display: inline-block;
position: relative;
font-size: 0; /* 防止inline-block元素间的空白 */
}
#target {
position: absolute;
width: 100%;
height: 100%;
/* 使target位于img之上，并接收点击事件 */
pointer-events: auto; /* 确保target可以接收点击事件 */
}
#img {
transition: 5s ease;
z-index: 2;
pointer-events: none; /* 禁用img的点击事件，防止干扰 */
}- wrapper 使用 position: relative，以便 target 可以使用 position: absolute 进行定位。
- target 使用 position: absolute，使其覆盖在 img 之上。width: 100% 和 height: 100% 确保其与 img 大小相同。pointer-events: auto; 确保其可以接收点击事件。
- img 使用 pointer-events: none，禁用其点击事件，防止干扰。
JavaScript 代码:
function onButton() {
const img = document.querySelector("#img");
const target = document.querySelector("#target");
img.style.scale = 5.0;
target.style.scale = 5.0; // 确保target的缩放比例与img一致
}
function onImage(event) {
console.log(event.offsetX, event.offsetY);
}- onButton 函数用于触发缩放动画。需要确保 target 和 img 的 scale 值一致。
- onImage 函数用于处理点击事件，并输出 event.offsetX 和 event.offsetY。
完整示例
@@##@@
注意事项
- 确保辅助元素的大小和位置与图片元素完全一致。
- 禁用图片元素的点击事件，防止干扰。
- 辅助元素的缩放比例应与图片元素的最终缩放比例一致。
- font-size: 0 在 wrapper 中是为了消除 inline-block 元素之间可能出现的空白。
- pointer-events: auto 确保 target 可以接收点击事件，而 pointer-events: none 确保 img 不会接收点击事件。
总结
通过引入辅助元素，我们可以绕过CSS过渡动画的影响，准确获取鼠标相对于最终缩放状态下元素的位置。这种方法简单有效，适用于各种需要基于最终状态进行计算的场景。 这种方法的核心在于利用一个与动画元素最终状态相同的不可见元素来捕获鼠标事件，从而避免了动画过程中的偏移量变化。
