In the loop

incorrect transition line place?

by Max Sinev

HTML

<!-- youtube.com/watch?v=cCOL7MC4Pl0 -->
<button id="btn1">1</button>
<div class="box"></div>
<div class="big">
  <div class="small"></div>
</div>
<p></p>
<button id="btn2">2</button>
<div class="box"></div>
<div class="big">
  <div class="small"></div>
</div>

CSS

.box {
  width: 50px;
  height: 50px;
  background: red;
}

.big {
  height: 5px;
  width: 250px;
  background: grey;
}

.small {
  height: 5px;
  width: 130px;
  background: cyan;
}

JavaScript

let box1 = document.querySelectorAll(".box")[0];
document.getElementById("btn1").addEventListener("click", () => {
	box1.style.transform = 'translateX(250px)';
  
	requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      box1.style.transition = 'transform 1s ease-in-out';
      box1.style.transform = 'translateX(130px)';
    });
  }); 
  
});

let box2 = document.querySelectorAll(".box")[1];
document.getElementById("btn2").addEventListener("click", () => {
	box2.style.transform = 'translateX(250px)';
  box2.style.transition = 'transform 1s ease-in-out';
  
	requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      box2.style.transform = 'translateX(130px)';
    });
  }); 
  
});