16

更新 2：

在 Chrome 31.0.1650.34 beta 中运行下面的 JSFiddle 现在不会导致所描述的行为，即它不会“在 JavaScript 启动时冻结”。我只能假设他们已经将 CSS 转换放置在与 JavaScript 和页面的其余部分不同的线程上——好消息！Firefox 25.0 中仍然会出现冻结/阻塞转换。

更新1：

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

原始问题：

对于浏览器供应商来说，这可能更像是一个问题，但这里有：到目前为止，我从这个视频（和其他视频）中得到的印象是，过渡 CSS 不透明度不会真正受到任何性能问题的影响。

在视频中，Paul Irish 特别给出了过渡不透明度不会成为问题的印象，并且“任何告诉你其他情况的人都是......错误的”。

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

鉴于 Paul 的非凡主张，为什么 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;
}
4

2 回答 2

9

Javascript 在浏览器的 UI 线程上运行。

整个页面被Javascript屏蔽；不仅仅是 CSS 过渡。

于 2013-03-12T17:35:00.460 回答
8

选择的答案有点过时了。截至今天，在 OSX safari、firefox 和 chrome 上，它们都在与 javascript 不同的线程中运行 css 动画。

于 2017-05-24T22:21:32.263 回答