[Event Loop] 다음 문제에 대해서 Event Loop의 Call Stack과 연관지어 설명해주세요.

버튼을 선택하면 div가 500만틈 움직였다가 300만큼 돌아오는 코드를 짜보았는데, 제대로 동작하지 않습니다. 그 이유를 Event Loop의 Call Stack과 관련지어 설명해주세요.

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .box {
      margin: 10px;
      width: 50px;
      height: 50px;
      background-color: red;
    }
  </style>
</head>

<body>
  <button id="button1">Let's go</button>
  <div class="box"></div>
<script>
  const button1 = document.querySelector('#button1');
  const box = document.querySelector('.box');

  button1.addEventListener('click', () => {
    box.style.transition = 'transform 1s ease-in';
    box.style.transform = 'translateX(500px)';
    box.style.transform = 'translate(300px)';
  })
</script>
</body>

</html>

toggle-toggle / javascript-basic

[Event Loop] 다음 문제에 대해서 Event Loop의 Call Stack과 연관지어 설명해주세요. #34