CSSトランジションが終了した時に処理を行う transitionend

.circle {
  width: 100px;
  height: 100px;
  background-color: aqua;
  transition: 2s;
}

.circle.action {
  transform: translateX(300px);
}

<div class="circle"></div>

const myRect = document.querySelector(".circle");
myRect.addEventListener("click", (e) => {
  e.target.classList.toggle("action");
  console.log("アニメーションスタート");
});
myRect.addEventListener("transitionend", () => {
  console.log("アニメーションエンド");
});