css3 - Why does the initial display:block of transition transform have no movement effect?

Question

https://jsfiddle.net/zjmove/2...

---After reading xiaoboost’s answer---
In the end, this is the most appropriate change: https://jsfiddle.net/25d3ga9j...
I didn’t make it clear. In fact, I don’t need next. Animation only requires the effect of left from right to left. As for why there is no animation effect in the initial display: block, it may be that the initial item has already been displayed, and the force reflow has not had time to redraw; display: none does not need to redraw the page, just go from right to left when left. Thanks again.

--
It can only be said that the problem is related to this force reflow. The principle is still unclear.

--There are big differences between different browsers
The above modification works perfectly in Firefox, but in Chrome57 (ubuntu) the mouse movement will flash once

--Initial display: block, print the transforms attribute, and find that force reflow does not take effect. To summarize: display:block does not take effect when there is a transition.
https://jsfiddle.net/25d3ga9j...

Answer 1

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);