为什么CSS动画和转换被JavaScript阻止？ [英] Why are CSS animations and transitions blocked by JavaScript?

问题描述

更新2：

在Chrome 31.0.1650.34测试版中执行JSFiddle，现在不在所描述的行为，即它不冻结作为JavaScript踢。我只能假设他们把CSS转换放在一个单独的JavaScript线程，其余的页面好消息！

$ b

更新1：

@IvanCastellanos提到CSS转换和动画在Android Chrome上不被阻止。

p>这可能是对浏览器供应商的一个问题，但这里：直到现在我受到此视频（和其他人），转换CSS透明度不会真正遭受任何性能问题。

在视频中，Paul Irish特别给人的印象是，转换不透明度不会是一个问题，任何人告诉你，否则只是...错误 。

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

为什么CSS转换被JavaScript阻塞，保罗提出了非同寻常的声明？这也是动画的情况，发生了什么？ / p>

（对于那些你没有看到我看到的东西，或太懒惰，看看小提琴：我看到一个红色正方形使它大约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 + ; 
 
 //在JavaScript中做一些密集的操作
 setTimeout（function（）{
 
 for（i = 0; i< 10000; i + 1）{
 console.log（i）; 
} 
 
}，200）; //让它发生在中间的CSS转换
 
 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; 
} 
  

解决方案

Javascript在浏览器的UI上运行被Javascript阻止。 不只是CSS转换。

Update 2:

Running the JSFiddle below, in Chrome 31.0.1650.34 beta now does not result in the described behaviour i.e. it does not "freeze as the JavaScript kicks in". I can only assume they have placed the CSS transitions on a separate thread from JavaScript, and the rest of the page—good news! The freezing/blocked transition still does appear in Firefox 25.0.

Update 1:

@IvanCastellanos mentioned that CSS transitions and animations are not blocked on Android Chrome. This is extremely useful information, and partially motivated this question.

Original Question:

This might be more of a question for the browser vendors, but here goes: Until now I was under the impression from this video (and others) that transitioning CSS opacity wouldn't really suffer from any performance issues.

In the video Paul Irish specifically gives the impression that transitioning opacity just isn't going to be a problem and "anyone that tells you otherwise is just ...wrong".

Well, if that's the case, this fiddle makes me wrong.

Why is the CSS transition being blocked by JavaScript, given Paul's extraordinary claims? This is also the case for animations, what's going on?

(For those of you either not seeing what I'm seeing, or too lazy to view the fiddle: I see a red square make it about 1/5 the way through a fade-in transition and then freeze as the JavaScript kicks in, then the squares jump to the end of the transition to full opacity, presumably because the duration has been reached during JavaScript execution.)

Given that stackoverflow is requiring I post some code because I'm linking to jsfiddle, here's the relavant JavaScript and 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);
}());

And CSS:

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

.fadingSquare.active {
    opacity: 1;
}

解决方案

Javascript runs on the browser's UI thread.

The entire page is blocked by Javascript; not just CSS transition.

这篇关于为什么CSS动画和转换被JavaScript阻止？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！