Question

我正在尝试更改动画的关键帧。

我找到了关键帧，将其删除，但是无法向其插入新规则。浏览器显示错误：

TypeError: keyframes.insertRule is not a function

我打印了我得到的对象的类型：

删除之前：

CSSKeyframesRule {name: "breath", cssRules: CSSRuleList, type: 7, cssText: "@-webkit-keyframes breath { ↵  0% { box-shadow: re…20px; }↵  100% { box-shadow: red 0px 0px 2px; }↵}", parentRule: null, …}

删除后：

CSSKeyframesRule {name: "breath", cssRules: CSSRuleList, type: 7, cssText: "@-webkit-keyframes breath { ↵}", parentRule: null, …}

css：

/*breath*/
        #main {
            -webkit-box-shadow:0 0 30px rgba(250, 250, 143, 0.75);
            -moz-box-shadow:0 0 30px rgba(250, 250, 143, 0.75);
            -ms-box-shadow:0 0 30px rgba(250, 250, 143, 0.75);
            -o-box-shadow:0 0 30px rgba(250, 250, 143, 0.75);
            box-shadow:0 0 30px rgba(250, 250, 143, 0.75);

            -webkit-animation-name: breath;
            -webkit-animation-duration: 6s;     
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-iteration-count: infinite;
        }
        @-webkit-keyframes 'breath' {
            0% {
                -webkit-box-shadow:0 0 2px red;
                -moz-box-shadow:0 0 2px red;
                -ms-box-shadow:0 0 2px red; 
                -o-box-shadow:0 0 2px red;
                box-shadow:0 0 2px red;
            }

            50% {
                -webkit-box-shadow:0 0 20px red;
                -moz-box-shadow:0 0 20px red;
                -ms-box-shadow:0 0 20px red;
                -o-box-shadow:0 0 20px red);
                box-shadow:0 0 20px red;
            }   

            100% {
                -webkit-box-shadow:0 0 2px red;
                -moz-box-shadow:0 0 2px red;
                -ms-box-shadow:0 0 2px red; 
                -o-box-shadow:0 0 2px red;
                box-shadow:0 0 2px red;
            }
        }

JS ：（在Vue中，但不难阅读）


    new Vue({
        el: "#main",
        data: {
            lightColor:"",
        },
        methods:{
            findKeyframesRule(name){
                var ss = document.styleSheets;
                for(var i=0; i<ss.length; i++){
                    for(var j=0; j<ss[i].cssRules.length; j++){
                        var rule = ss[i].cssRules[j];
                        if(rule.name == name && (rule.tyle == window.CSSRule.KEYFRAMES_RULE) || rule.style == window.CSSRule.WEBKIT_KEYFRAMES_RULE){
                            return rule;
                        }
                    }
                }
                return null;
            },
            breathStyleRefresh: function(){
                this.lightColor = this.randomColor();
                var keyframes = this.findKeyframesRule("breath");
                console.log(keyframes);

                keyframes.deleteRule("0%");
                keyframes.deleteRule("50%");
                keyframes.deleteRule("100%");
                console.log(keyframes);

                var newRule1 = "{" + 
                    "-webkit-box-shadow: 0 0 2px" + this.lightColor +";" +
                    "-moz-box-shadow: 0 0 2px" + this.lightColor +";" +
                    "ms-box-shadow: 0 0 2px" + this.lightColor +";" +
                    "-o-box-shadow: 0 0 2px" + this.lightColor +";" +
                    "box-shadow: 0 0 2px" + this.lightColor +";" +
                "}";

                var newRule2 = "{" + 
                    "-webkit-box-shadow: 0 0 20px" + this.lightColor +";" +
                    "-moz-box-shadow: 0 0 20px" + this.lightColor +";" +
                    "ms-box-shadow: 0 0 20px" + this.lightColor +";" +
                    "-o-box-shadow: 0 0 20px" + this.lightColor +";" +
                    "box-shadow: 0 0 20px" + this.lightColor +";" +
                "}";

                keyframes.insertRule("0% " + newRule1);   // error occurs here
                keyframes.insertRule("50% " + newRule2);
                keyframes.insertRule("100% " + newRule1);
            },
        },
        mounted: function(){
            this.breathStyleRefresh();
            setIntervel(this.breathStyleRefresh, 600);
        },
    });

据说styleSheets没有方法“ insertRule（）”，但是CSSStyleSheet有。但是，似乎很多人都这样写。

Answer 1

我相信您要查找的方法称为appendRule，而不是insertRule。

https://developer.mozilla.org/en-US/docs/Web/API/CSSKeyframesRule

insertRule是CSSStyleSheet而非CSSKeyframesRule的方法：

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule

从历史上看，CSSKeyframesRule确实有一种insertRule方法：

https://www.fxsitecompat.dev/en-CA/docs/2013/csskeyframesrule-insertrule-has-been-renamed-to-appendrule/

https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/wW7w8Hro78s

如何修复“ vue.min.js：6 TypeError：keyframes.insertRule不是函数”？

1 个答案: