相关疑难解决方法(0)

更新2:

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

更新1:

@IvanCastellanos提到Android Chrome上没有阻止CSS过渡和动画.这是非常有用的信息,部分推动了这个问题.

原始问题:

对于浏览器供应商来说,这可能是一个更大的问题,但现在说:到目前为止,我对这个视频(和其他人)的印象是,转换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); …

是否可以通过SVG元素的三维变换实现透视？

我正在谈论类似于星球大战开场标题的三维视角.这是一个使用CSS3 3d变换实现所需效果的jsfiddle:

<section style="transform: perspective(200px) rotateX(-30deg); transform-origin: 50% 100%; text-align: justify; width: 100px;">
  <p style="backface-visibility: hidden;">TEXTTEXTTEXT</p>
</section>