css3 - transition transform初始display:block怎么就没移动效果？

Question

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

---看完xiaoboost的回答---
最后这样改最合适：https://jsfiddle.net/25d3ga9j...
我没说清楚，其实我并不需要next的动画，只需要left从右往左的效果。至于为什么初始display:block就没有动画效果，可能这样初始item就已经显示出来了，force reflow没来得及重绘；display:none就不需要重绘页面了，left时直接从右往左就行了。再次感谢。

--
只能说问题和这个force reflow有关，到底什么原理还是不清楚的。

--不同浏览器差异大啊
上面的改法，在firefox里完美，在chrome57(ubuntu)里鼠标移动会闪动一次

--初始display:block，打印transforms属性，发现force reflow并没有生效。总结一下：display:block并且有过渡效果（transition）时就不生效。
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);