为什么CSS动画和过渡会被JavaScript阻止？

Question

更新2：

现在在Chrome 31.0.1650.34 beta中运行下面的JSFiddle 不会
导致所描述的行为，即它不会“随着JavaScript的启动而冻结”。我只能假定他们已经将CSS转换放置在与JavaScript分开的单独线程上，以及页面的其余部分-
好消息！冻结/阻止的过渡仍会在Firefox 25.0中出现。

更新1：

@IvanCastellanos提到在Android Chrome上 没有 阻止CSS过渡和动画。这是非常有用的信息，部分地激发了这个问题。

原始问题：

对于浏览器供应商来说，这可能是一个更大的问题，但这是可行的：到目前为止，这段视频（和其他视频）给我的印象是，转换CSS的不透明度实际上不会受到
任何 性能问题的困扰。

保罗·爱尔兰（Paul Irish）在视频中特别给人的印象是，过渡的不透明度将不再是问题，“否则，告诉您的任何人都……是错误的”。

好吧，如果是这样， *

考虑到Paul的非凡主张，为什么CSS转换会被JavaScript阻止？ 动画也是如此，这是怎么回事？

（对于你们中的一些人来说，要么看不见我所看到的东西，要么懒得看小提琴：我看到一个红色正方形将其变成淡入过渡的大约1/5，然后随着JavaScript的加入而冻结，然后方块跳到完全不透明过渡的结尾，大概是因为在执行JavaScript时达到了持续时间。）

鉴于要求我发布一些代码，因为我要链接到jsfiddle，因此这里是相对的JavaScript和CSS：

(function () {
    "use strict";

    var isVisible = false;

    function handleClick() {

        var fadingSquare = document.querySelector(".fadingSquare"),
            i;

        if (isVisible === false) {
            fadingSquare.className = fadingSquare.className + " active";

            // Do something intensive in JavaScript for a while
            setTimeout(function () {

                for(i = 0; i < 10000; i += 1) {
                    console.log(i);
                }

            }, 200);    // Make it occur midway through the CSS transition

            isVisible = true;
        } else {
            fadingSquare.className = fadingSquare.className.replace("active", "");
            isVisible = false;
        }

    }

    document.addEventListener("click", handleClick, false);
}());

和CSS：

.fadingSquare {
    width: 200px;
    height: 200px;
    background: #F00;
    opacity: 0;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 1s;
}

.fadingSquare.active {
    opacity: 1;
}

Answer 1

所选答案有些过时。从今天开始，在OSX Safari，Firefox和chrome中，所有css动画都在与javascript不同的线程中运行。