问题 为什么CSS动画和转换被JavaScript阻止？

更新2：

现在在Chrome 31.0.1650.34测试版中运行下面的JSFiddle 才不是 导致所描述的行为，即它不会“随着JavaScript的开始而冻结”。我只能假设他们已经将CSS转换放在一个与JavaScript不同的线程上，而其余的页面好消息！冻结/阻止转换仍然出现在Firefox 25.0中。

更新1：

@IvanCastellanos提到了CSS过渡和动画 不 已在Android Chrome上屏蔽这是非常有用的信息，部分推动了这个问题。

原始问题：

对于浏览器供应商来说，这可能是一个更大的问题，但这里说：到目前为止，我的印象来自于 这个视频 （以及其他人）转换CSS不透明度并不会真正受到影响 任何 性能问题。

在视频中，保罗爱尔兰特别给人的印象是过渡不透明不会成为一个问题，“任何告诉你的人都只是......错了”。

好吧，如果是这样的话， 这个小提琴让我错了。

鉴于保罗的非凡主张，为什么CSS过渡被JavaScript阻止？ 这也是动画的情况，发生了什么？

（对于那些你没有看到我正在看到的东西，或者懒得看到小提琴的人：我看到一个红色的方块使其大约是淡入过渡的1/5，然后随着JavaScript的开始冻结，然后广场跳转到完全不透明度的过渡结束，大概是因为在JavaScript执行期间已达到持续时间。）

鉴于stackoverflow需要我发布一些代码因为我链接到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;
}