css3 - Warum hat der anfängliche display:block der Übergangstransformation keinen Bewegungseffekt?

Question

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

---Nachdem ich die Antwort von Xiaoboost gelesen habe---
Am Ende ist dies die passendste Änderung: https://jsfiddle.net/25d3ga9j...
Ich habe es nicht klar ausgedrückt. Ich brauche nicht die nächste Animation, ich brauche nur den Rechts-nach-Links-Effekt. Was den Grund betrifft, warum im anfänglichen Anzeigeblock kein Animationseffekt vorhanden ist, kann es sein, dass das ursprüngliche Element bereits angezeigt wurde und der erzwungene Reflow keine Zeit zum Neuzeichnen hatte. display: none muss die Seite einfach nicht neu zeichnen Gehen Sie von rechts nach links, wenn Sie links sind. Danke noch einmal.

--
Ich kann nur sagen, dass das Problem mit diesem Force-Reflow zusammenhängt, aber das Prinzip ist noch unklar.

--Es gibt große Unterschiede zwischen verschiedenen Browsern
Die obige Modifikation funktioniert perfekt in Firefox, aber in Chrome57 (Ubuntu) blinkt sie einmal, wenn die Maus bewegt wird

--Anfängliche Anzeige: Blockieren Sie, drucken Sie das Transformationsattribut und stellen Sie fest, dass der erzwungene Reflow keine Wirkung zeigt. Zusammenfassend lässt sich sagen: display:block wird nicht wirksam, wenn ein Übergang vorliegt.
https://jsfiddle.net/25d3ga9j...

Answer 1

首先，我个人觉得这是因为网页渲染进程和js进程是互斥所导致的。

具体的可以看看这个问题：当我用js给元素添加className时，浏览器发生了什么？
我觉得高票答案已经说的很清楚了，你在js脚本中加入的这么一句：

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

我猜也是想要强制重绘页面吧？

我个人并没有研究过这方面浏览器具体的实现，但是根据我个人的观察，读取DOM的信息虽然会强制重绘网页，但实际上也只是内部数据的重新计算，DOM的改变并不会反映到页面中，真正的页面重绘还是只能等到当前js进程完成之后。

具体到你这个例子中，为了以示区别，我把.next和.left在css中的宽度稍微改了改，然后js中打印出添加上.next类之后的宽度：

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

在这里你会看到，打印出来的宽度只有一半，说明在内存中的DOM数据的确是已经重新计算了，但是页面却并没有重绘。
和那边那个问题中的解决方案一样，你也只能用异步函数，在页面效果切换的空隙中把进程空出来给页面渲染，这样你才能看到动态效果。

比如你这里，这么改就行了：

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