更新 2:
在 Chrome 31.0.1650.34 测试版中运行下面的 JSFiddle 不会导致所描述的行为,即它不会“在 JavaScript 启动时卡住”。我只能假设他们已经将 CSS 转换放置在与 JavaScript 和页面其余部分不同的线程上——好消息!卡住/阻塞转换仍然出现在 Firefox 25.0 中。
更新 1:
@IvanCastellanos 提到 CSS 转换和动画在 Android Chrome 上不会被阻止。这是非常有用的信息,部分地激发了这个问题。
原始问题:
对于浏览器 vendor 来说,这可能更像是一个问题,但这里有:到目前为止,我的印象来自 this video (和其他人)转换 CSS 不透明度不会真正受到任何性能问题的影响。
在视频中,Paul Irish 特别给人的印象是过渡不透明度不会成为问题,“任何人告诉你否则就是......错了”。
好吧,如果是这样的话, this fiddle makes me wrong 强>。
为什么 CSS 转换被 JavaScript 阻止,鉴于 Paul 非凡的声明?动画也是如此,这是怎么回事?
(对于那些没有看到我所看到的,或者懒得看 fiddle 的人:我看到一个红色方 block 在淡入过渡过程中完成了大约 1/5,然后卡住为 JavaScript开始,然后方 block 跳到完全不透明过渡的末尾,大概是因为在 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;
}
最佳答案
Javascript 在浏览器的 UI 线程上运行。
整个页面被Javascript拦截了;不仅仅是 CSS 转换。
关于javascript - 为什么 CSS 动画和过渡会被 JavaScript 阻止?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15368087/