to rotate 5 pictures, arrange 5-> 1-> 2-> 3-> 4-> 5-> 17 pictures to achieve seamless
the actual idea is that the last one rolls to the first one, actually rolls along, cancels the transition at the end of the animation and then switches back to the first one and then appends transition
now I encounter this problem

/...5->1.../
     if (newLeft === -3600) { //7left,
          setTimeout(function () {
            list.style.transition = "none"; //
            list.style.left = -600 + "px"; //
            list.style.transition = "left 2s linear";// //
          },2000)
      }

the animation will take effect when rollback
must be written as follows. The second timer must be longer than 2000 milliseconds to meet the demand.
Why does this happen? the callback function in the timer should be Synchronize. If list.style.left =-600 + "px"; is not finished, it should not be animated.

if (newLeft === -3600) {
      setTimeout(function () {
        list.style.transition = "none";
        list.style.left = -600 + "px";
      },2000)
      setTimeout(function () {
                list.style.transition = "left 2s linear";
      },2020)
}

here I found that the interval time of 1-4 seconds is basically useless, and the interval 10ms occasionally produces rollback animation, and there is basically no problem in setting 20ms. In fact, it is still a problem just now. Js is single-threaded and will block. If the code executed by 2000ms is not finished, 2010ms will not take the asynchronous code for execution. If the execution is done, then my rollback should have no animation. Ask the great god to explain