First of all, I personally think this is because the web page rendering process and the js process are mutually exclusive.

For details, you can look at this question: When I use js to add className to an element, what happens to the browser?
I think the top-voted answer has made it very clear. You added this sentence in the jsscript:

$('.item')[0].offsetWidth;

I guess you also want to force the page to be redrawn?

I personally have not studied the specific implementation of browsers in this regard, but according to my personal observation, although reading DOM information will force the web page to be redrawn, it is actually just a recalculation of internal data, and changes in the DOM do not It will be reflected in the page, and the real page redrawing can only wait until the current js process is completed.

Specifically in your example, in order to show the difference, I put the width after the .next和.left在css中的宽度稍微改了改，然后js中打印出添加上.nextclass:

.item.next {
  display: block;
  width: 50%;
  transform: translate3d(100%, 0, 0);
  left: 0;
}

.item.next.left {
  width: 100%;
  transform: translate3d(0, 0, 0);
  left: 0;
}

$('.item').addClass('next');
console.log($('.item')[0].offsetWidth); 
$('.item').addClass('left');

Here you will see that the printed width is only half, indicating that the DOM data in the memory has indeed been recalculated, but the page has not been redrawn.
Similar to the solution in the question over there, you can only use asynchronous functions to free up the process for page rendering in the gap between page effect switching, so that you can see dynamic effects.

For example, here you can change it like this:

$('.item').addClass('next');
setTimeout(() => {
    $('.item').addClass('left');
}, 1000);