javascript - 如何在过渡开始和结束时更改图像？

Question

我正在尝试制作一个行走动画，该程序执行该角色转到鼠标单击。但是当它移动以更改图像以及停止返回第一张图像时，我无法做到。这是js文件和css文件的代码：

import "./styles.css";
var theThing = document.querySelector("#thing");
var cont = document.querySelector("#contentCont");
cont.addEventListener("click", getClickPosition, false);
function getClickPosition(e) {
  theThing.src = "ddd2.gif";
  var parentPosition = getPosition(cont);
  var xPosition = e.clientX - parentPosition.x - theThing.offsetWidth / 2;
  var yPosition = e.clientY - parentPosition.y - theThing.offsetHeight / 2;
  var translate3dValue =
    "translate3d(" + xPosition + "px," + yPosition + "px,0)";
  theThing.style.transform = translate3dValue;
}
function getPosition(element) {
  var xPos = 0;
  var yPos = 0;

  while (element) {
    xPos += element.offsetLeft - element.scrollLeft + element.clientLeft;
    yPos += element.offsetTop - element.scrollTop + element.clientTop;
    element = element.offsetParent;
  }
  return {
    x: xPos,
    y: yPos
  };
}

body {
  background-color: #fff;
  padding: 50px;
  margin: 0;
}
#contentCont {
  width: 600px;
  height: 600px;
  border: 15px #ededed solid;
  overflow: hidden;
  background-color: #f2f2f2;
  cursor: pointer;
}
#thing {
  width: 80px;
  height: 80px;
  transition: transform 0.7s ease-in;
}

现在它从图像 1 开始，步行时变为图像 2，但停止时不会返回图像 1。

标签： javascriptcss