javascript - Firefox 中的 CSS 动画不起作用

Question

我在让 CSS 动画在 firefox 浏览器中正常工作时遇到了问题。我尝试使用“moz”前缀，但没有成功。动画在 chrome 中按预期工作，请参见下面的代码。

var ss = document.styleSheets;
var rec;
var bg = document.getElementById('bg');
function getRule (name) {
	var indexArr = [];
	for(var i = 0; i<ss[0].cssRules.length; i++){
		if(ss[0].cssRules[i].name !== "undefined" && ss[0].cssRules[i].name === name){
			indexArr.push(i);
		}
	}
	return indexArr;
}
function swapNode(node){
	tmp = node.cloneNode(false);
	node.parentNode.removeChild(node);
	rec = tmp;
	bg.appendChild(rec);
}
function modifyRule(element, name, val){
	var browser = checkBrowser();
	// if(element.style.webkitAnimationPlayState === "paused")
	// 	element.style.webkitAnimationPlayState = "running";

	var indexes = getRule(name);
	var rule = [];

	if(indexes.length){
		element.style.WebkitAnimationName = "none";
		element.style.WebkitAnimationName = name;				
		element.style.mozAnimationName = "none";
		element.style.mozAnimationName = name;				
		element.style.AnimationName = "none";
		element.style.AnimationName = name;
		
		
		swapNode(element);
		
		if(name === "translate"){
			rule[0] = "@-"+browser+"-keyframes "+name+" {"+
				"0% {-"+browser+"-transform: "+name+"(0px);}"+
				"50% {-"+browser+"-transform: "+name+"("+val+");}"+
				"100% {-"+browser+"-transform: "+name+"(0px);}}";

			rule[1] = "@keyframes "+name+" {"+
				"0% {transform: "+name+"(0px);}"+
				"50% {transform: "+name+"("+val+");}"+
				"100% {transform: "+name+"(0px);}}";			
		}
		else{
			rule[0] = "@-"+browser+"-keyframes "+name+" {"+
				"100% {-"+browser+"-transform: "+name+"("+val+");}}";
			rule[1] = "@keyframes "+name+" {"+
				"100% {transform: "+name+"("+val+");}}";

		}
		for(var i = 0; i<indexes.length; i++){
			console.log(rule[i]);
			ss[0].deleteRule(indexes[i]);
			ss[0].insertRule(rule[i], indexes[i]);				
			
		}
		
		
		
	}
	else{
		console.log('err');
	}
	
}
function stopAnim (element) {
	element.style.WebkitAnimationPlayState = "paused";
}
function checkBrowser () {
	if(navigator.userAgent.indexOf("Chrome") != -1 ) 
    {
        return "webkit";
    }
    else if(navigator.userAgent.indexOf("Firefox") != -1 ) 
    {
         return "moz";
    }
}

.container {
    position: relative;
    left: 40px;
    top: 50px;
    width: 240px;
    height: 150px;
}
#bg {
    width: 100%;
    height: 90px;
    background-color: #f3f3ff;
    border: solid;
    border-width: 1px;          
}
#recBlue{
    height: 50px;
    width: 50px;
    background-color: #aaaaff;
    border: solid;
    border-width: 3px;
    position: absolute;
    left: 35px;
    top: 20px;

    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: "bounce";
    -webkit-animation-fill-mode: forwards;
    -moz-animation-duration: 2s;
    -moz-animation-timing-function: "bounce";
    -moz-animation-fill-mode: forwards;

}
#recRed{

    height: 50px;
    width: 50px;
    background-color: #ffaaaa;
    border: solid;
    border-width: 3px;
    position: absolute;
    left: 150px;
    top: 20px;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: "ease-in-out";
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;

}
#btn-grp{
    text-align: center;
}       
@-webkit-keyframes rotate {

}           
@-webkit-keyframes translate {

}           
@-moz-keyframes rotate {

}           
@-moz-keyframes translate {

}       

<div class="container">
    <div id="bg">
        <div id="recBlue">
            
        </div>
        <div id="recRed">
            
        </div>
    </div>
    <div id="btn-grp">
        <button id="clock" onclick='modifyRule(recBlue, "rotate", "100deg");'>></button>
        <button id="anticlock" onclick='modifyRule(recBlue, "rotate", "-100deg");'><</button>
        <button id="move" onclick='modifyRule(recRed, "translate", "-100px")'>></button>
        <button id="stop" onclick='stopAnim(recRed)'>#</button>
        
    </div>
</div>

如有任何帮助，我们将不胜感激!

Answer 1

   var ss = document.styleSheets;
        var rec;
        var bg = document.getElementById('bg');

        function getRule (name) {
            for(var i = 0; i<ss[0].cssRules.length; i++){
                if(ss[0].cssRules[i].name !== "undefined" && ss[0].cssRules[i].name === name)
                    return i;
            }
        }
        function swapNode(node){
            tmp = node.cloneNode(false);
            node.parentNode.removeChild(node);
            rec = tmp;
            bg.appendChild(rec);
        }
        function modifyRule(element, name, val){
            var browser = checkBrowser();
            console.log(browser);
            if(element.style.webkitAnimationPlayState === "paused")
                element.style.webkitAnimationPlayState = "running";

            var index = getRule(name);
            var rule = "";

            if(typeof index !== "undefined"){
                element.style.WebkitAnimationName = "none";
                element.style.WebkitAnimationName = name;               
                element.style.mozAnimationName = "none";
                element.style.mozAnimationName = name;

                ss[0].deleteRule(index);
                swapNode(element);

                if(name === "translate"){
                    rule = "@-"+browser+"-keyframes "+name+" {"+
                        "0% {-"+browser+"-transform: "+name+"(0px);}"+
                        "50% {-"+browser+"-transform: "+name+"("+val+");}"+
                        "100% {-"+browser+"-transform: "+name+"(0px);}}";           
                }
                else{
                    rule = "@-"+browser+"-keyframes "+name+" {"+
                        "100% {-"+browser+"-transform: "+name+"("+val+");}}";
                    console.log(rule); 

                }
                ss[0].insertRule(rule, index);              


            }
            else{
                console.log('err');
            }

        }
        function stopAnim (element) {
            element.style.WebkitAnimationPlayState = "paused";
        }
        function checkBrowser () {
            if(navigator.userAgent.indexOf("Chrome") != -1 ) 
            {
                return "webkit";
            }
            else if(navigator.userAgent.indexOf("Firefox") != -1 ) 
            {
                 return "moz";
            }
        }

        .container {
            position: relative;
            left: 40px;
            top: 50px;
            width: 240px;
            height: 150px;
        }
        #bg {
            width: 100%;
            height: 90px;
            background-color: #f3f3ff;
            border: solid;
            border-width: 1px;          
        }
        #recBlue{
            height: 50px;
            width: 50px;
            background-color: #aaaaff;
            border: solid;
            border-width: 3px;
            position: absolute;
            left: 35px;
            top: 20px;

            animation-duration: 2s;
            animation-timing-function: "bounce";
            animation-fill-mode: forwards;
            animation-name:translate;


            -webkit-animation-duration: 2s;
            -webkit-animation-timing-function: "bounce";
            -webkit-animation-fill-mode: forwards;
            -webkit-animation-name:translate;

           

        }
        #recRed{

            height: 50px;
            width: 50px;
            background-color: #ffaaaa;
            border: solid;
            border-width: 3px;
            position: absolute;
            left: 150px;
            top: 20px;
             animation-duration: 2s;
            animation-timing-function: "ease-in-out";
            animation-fill-mode: forwards;
            animation-iteration-count: infinite;
            animation-name:rotate;

            -webkit-animation-duration: 2s;
            -webkit-animation-timing-function: "ease-in-out";
            -webkit-animation-fill-mode: forwards;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-name:rotate;


           
        }
        #btn-grp{
            text-align: center;
        }       
        @-webkit-keyframes rotate {

        }           
        @-webkit-keyframes translate {

        }  

        @keyframes rotate {

        }           
        @keyframes translate {

        }       
  

    <div class="container">
        <div id="bg">
            <div id="recBlue">

            </div>
            <div id="recRed">

            </div>
        </div>
        <div id="btn-grp">
            <button id="clock" onclick='modifyRule(recBlue, "rotate", "100deg");'>></button>
            <button id="anticlock" onclick='modifyRule(recBlue, "rotate", "-100deg");'><</button>
            <button id="move" onclick='modifyRule(recRed, "translate", "-100px")'>></button>
            <button id="stop" onclick='stopAnim(recRed)'>#</button>

        </div>
    </div>

您没有定义动画名称 -webkit-animation-name:rotate; 和 animation-name:rotate;。

希望对你有帮助。