在insertBefore之后，CSS Transition不会触发

Question

I am trying to create an horizontal carousel that loops.

You can check the code here: https://codepen.io/nobitta/pen/xNOyrj

At the moment I am stuck. I managed to make it work, however the CSS transition that mimics the movement to the right, is not triggering when you click "next".

I already did some research and some say this has to do with browsers optimization and that setting a timeout or calling offsetWidth or getBoundingRect() should do the trick, as it forces the browser to re-render. However, even with those tips, I was not able to make it work...

Am I doing something wrong or missing something here? What should I do?

Thanks in advance ~

Answer 1

I managed to fix it by playing around with the margin-left property.

My bet is that when I prepended the last slider's item, it naturally shifted right due to the new element's size and the space it occupies. Therefore I decided to shift it back to mask the insertion shift. I followed the same reasoning for the appended items.

You can check the codepen in the question for more detail.

I hope this helps someone.