您的代码不起作用，因为浏览器不会重新计算第一次和第二次"批量"更新之间的样式。
一个技巧是通过调用其中一个函数来强制浏览器重新计算它们，例如，我将使用getBoundingClientRect，因为浏览器需要计算样式来获得元素的大小和位置。
因此：

let element1 = document.querySelector(".box")
document.querySelector("button").onclick = () => {
  // Call the first batch of updates
  element1.style.transition = "none";
  element1.style.transform = "translateY(50px)";
  
  // Force the browser recalculate the styles
  element1.getBoundingClientRect();

  // Call the second batch of updates
  element1.style.transition = "all 0.4s";
  element1.style.transform = "translateY(10px)";
}

您可以将EventListener添加到transitionEnd事件，然后更改该类：

let element1 = document.querySelector(".box");

element1.addEventlistener("transitionend", loopTransition(),false);
element1.addEventListener("webkitTransitionEnd", loopTransition, false);
element1.addEventListener("mozTransitionEnd", loopTransition, false);
element1.addEventListener("msTransitionEnd", loopTransition, false);
element1.addEventListener("oTransitionEnd", loopTransition, false);

function loopTransition(e) {
  if (e.propertyName == "transform") {
      if (element1.className == "stateTwo") {
          element1.className = "stateOne";
      } else {
          element1.className = "stateTwo";
     }
  }
}

如果你不想使用这个类，你仍然可以使用这个结构来改变你的样式。
在你第一次点击的时候你开始了过渡