我有一個HTML圖像，我想平移。程序化縮放。為了改善體驗，我添加了一個CSS過渡，以實現流暢度。

當我點擊圖像時，我需要確定鼠標在圖像中的位置。目前，event.offsetX為我提供了鼠標在圖像中動畫當前幀的位置。

我想知道鼠標的位置，就好像動畫已經結束了一樣(即使它還沒有結束)。

這是解釋這個問題的另一種方法。我在下面創建了一個例子，當我們點擊按鈕后，圖像會放大。縮放需要5秒鐘。在縮放過程中，如果我保持鼠標不動并持續單擊，偏移值會隨著圖像在屏幕上的移動而變化，然后在5秒鐘后穩定下來并返回相同的偏移值。如果可能的話，我想在動畫結束前知道最終的偏移值。

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

<script>
function onButton() {
    const img = document.querySelector('#img')
    img.style.scale = 5.0
}
function onImage(event) {
    console.log(event.offsetX, event.offsetY)
}
</script>

如果你不介意添加一些額外的HTML和CSS:

function onButton() {
  const img = document.querySelector("#img");
  img.style.scale = 5.0;
  const target = document.querySelector("#target");
  target.style.scale = 5.0;// make sure target's style matches img's style
}
function onImage(event) {
  console.log(event.offsetX, event.offsetY);
}

#wrapper {
  display: inline-block;
  position:relative;
  font-size:0;
}
#target{
  position:absolute;
  width:100%;
  height:100%;
}
#img {
  transition: 5s ease;
  z-index:2;
  pointer-events:none;
}

<button onclick="onButton()">Zoom</button>
<br>
<div id="wrapper">
  <div id="target" onclick="onImage(event)"></div>
  <img id="img" src="https://picsum.photos/id/237/200">
</div>