将元素追加到页面时，浏览器如何处理转换效果？

Question

这是我的情况：当我点击一个按钮时，一个元素将附加到正文并执行一些过渡效果。但是如果我只是在$('body').append(DOM string)之后添加一个具有过渡效果的类，那么什么都不会发生。事实上，我找到了一些解决方案，比如使用setTimout;在追加元素后立即添加.hide().show();或在追加元素后添加getComputedStyle(ele).display。我的问题是为什么在添加这些代码后会运行转换效果？浏览器在添加代码之前和之后做了什么不同？

以下是代码：https://jsfiddle.net/7o310bhz/1/

在jsfiddle中，我添加了getComputedStyle（$ html [0]）。显示强制重排，我不确定它是否正确。在chrome时间轴中，我在解析HTML时得到了以下数据：

使用函数getComputedStyle（）

没有函数getComputedStyle（）

在解析HTML之后，我得到了以下数据：

使用函数getComputedStyle（）

没有函数getComputedStyle（）

如果添加黑客代码，您可以看到重新计算。此外，执行了函数add，这可能意味着已将css类添加到DOM。由于添加了css类，为什么添加或不添加黑客代码？

我希望我能清楚地解释清楚。谢谢！