一方面，CSS样式修改是渲染中的一种高成本操作，所以浏览器一般会缓存渲染树的更新。但有的情况则不会缓存，比如：

1. 调整窗口大小和修改页面默认字体

2. client/offset/scroll（比如访问 node.clientWidth 属性）

3. getComputedStyle() currentStyle

另一方面，setTimeout 是要等执行线程空闲的时候才会触发的。

以上是原理。下面看问题：

假设没有 setTimeout，效果成了：

    // 立即重排
    var height = window.getComputedStyle(element).height;
    // 缓存之
    element.style.height = "auto";
    // 立即重排
    var targetHeight = window.getComputedStyle(element).height;
    // 下面开始重点：
    // 缓存之
    element.style.height = height;
    // 缓存之
    if (time) element.style.transition = "height "+ time +"ms";
    // 缓存之
    element.style.height = targetHeight;
    // 渲染

结果就是，根本不会渲染高度为 height，而是直接渲染成 targetHeight。我们想要的结果是从 height 到 targetHeight 的过渡。

那有了 setTimeout，效果就是酱紫的了：

    // 缓存之
    element.style.height = height;
    // 空闲了才干
    setTimeout(function() {
        if (time) element.style.transition = "height "+ time +"ms";
        element.style.height = targetHeight;
    }, 15);
    // 立即重排

喏喏，浏览器得先重排高度为 height 才闲下来，而一闲下来才要求重排到 targetHeight，这才会产生过渡效果。