0

我有一个 HTML 文件：

<div id="container"></div>

我有一个定义了 CSS3 动画的样式表：

.image {
    position: absolute;
    -webkit-animation-name: image-create;
    -webkit-animation-duration: 1s;
}

@-webkit-keyframes image-create {
    from {
        width: 0px;
        height: 0px;
    }
    to {
        width: 500px;
        height: 500px;
    }
}

这应该使图像从 0x0 增长到 500x500。在我的 Javascript 文件中，我有以下内容：

var findAnimation = function(name) {
    for (var i in document.styleSheets) {
        var styleSheet = document.styleSheets[i];
        for (var j in styleSheet.cssRules) {
            var rule = styleSheet.cssRules[j];
            if (rule.type === 7 && rule.name == name) {
                return rule;
            }
        }
    }
    return null;
}

var addImage = function(x, y, src) {
    var image = new Image();
    image.src = src;
    image.className = "image";
    image.style.width = "500px";
    image.style.height = "500px";
    image.style.left = x;
    image.style.top = y;
    image.onload = function() {
        document.getElementById("container").appendChild(image);
        var animation = findAnimation("image-create");
        for (var i in animation.cssRules) {
            var rule = animation.cssRules[i];
            if (rule.keyText == "0%") {
                rule.style.top = y;
                rule.style.left = x;
            }
            if (rule.keyText == "100%") {
                rule.style.top = 0;
                rule.style.left = 0;
            }
        }
    }
}

addImage(100, 100, "http://i.imgur.com/KGfgH.jpg");

​</p>

调用 addImage() 时，我试图在坐标 (x, y) 处创建图像。动画应该让它增长，同时从创建图像的位置 (x, y) 移动到左上角 (0, 0)。

相反，Chrome 只是崩溃到“Aw, snap”页面。有谁知道为什么会这样？

编辑：这是一个例子。如果我访问它，这对我来说会崩溃：http: //jsfiddle.net/LVpWS/10/

在这一行中，我注释掉了一些行并且它没有崩溃：http: //jsfiddle.net/LVpWS/21/

EDIT2：如果我切换回 Chrome 20，它会起作用。

4

1 回答 1

2

我已经隔离了错误：
将新属性添加到WebKitCSSKeyframeRule实例时页面崩溃（Aw，snap）。可以使用以下代码在 Chrome 21.0.1180.57 中重现该错误：http: //jsfiddle.net/LVpWS/68/

<style id="sheet">
@-webkit-keyframes test {
    from {}
}</style><script>
var keyFramesRule = document.getElementById('sheet').sheet.cssRules[0];
var keyFrameRule = keyFramesRule[0];
keyFrameRule.style.top = 0;</script>

当该属性已存在于规则中时，不会发生此崩溃。替换from {}为from{top:1px;}检查：http: //jsfiddle.net/LVpWS/69/。

于 2012-08-01T08:34:38.710 回答