"使用 JavaScript 设置 webkit-keyframes from\/to 参数"

Question

有没有办法用 JavaScript 设置 webkit-keyframe 的from或to ？

Answer 1

您可以使用CSS DOM界面。 例如：

<html>
    <body>
        <style>
        @keyframes fadeout {
            from { opacity:1; }
            to { opacity:0; }
        }
        </style>
        <script text="javascript">
            var stylesheet = document.styleSheets[0];
            var fadeOutRule = stylesheet.cssRules[0];
            alert( fadeOutRule.name ); // alerts "fadeout"

            var fadeOutRule_From = fadeOutRule.cssRules[0];
            var fadeOutRule_To = fadeOutRule.cssRules[1];
            alert( fadeOutRule_From.keyText ); // alerts "0%" ( and not "from" as you might expect)
            alert( fadeOutRule_To.keyText ); // alerts "100%"

            var fadeOutRule_To_Style = fadeOutRule_To.style;

            alert( fadeOutRule_To_Style.cssText ); // alerts "opacity:0;"

            fadeOutRule_To_Style.setProperty('color', 'red'); // add the style color:red
            fadeOutRule_To_Style.removeProperty('opacity'); // remove the style opacity

            alert( fadeOutRule_To_Style.cssText ); // alerts "color:red;"
        </script>
    </body>
</html>

Answer 2

各种解决方案：

var cssAnimation = document.createElement('style');
cssAnimation.type = 'text/css';
var rules = document.createTextNode('@-webkit-keyframes slider {'+
'from { left:100px; }'+
'80% { left:150px; }'+
'90% { left:160px; }'+
'to { left:150px; }'+
'}');
cssAnimation.appendChild(rules);
document.getElementsByTagName("head")[0].appendChild(cssAnimation);

只需在标题中添加样式定义即可。 如果可能的话，通过DOM定义它会更清洁/更好。

编辑：使用旧方法在Chrome中出错

Answer 3

此示例涵盖几种不同的浏览器：

var keyFramePrefixes = ["-webkit-", "-o-", "-moz-", ""];
var keyFrames = [];
var textNode = null;

for (var i in keyFramePrefixes){

keyFrames = '@'+keyFramePrefixes[i]+'keyframes cloudsMove {'+
'from {'+keyFramePrefixes[i]+'transform: translate(0px,0px);}'+
'to {'+keyFramePrefixes[i]+'transform: translate(1440px'
'px,0px);}}';

textNode = document.createTextNode(keyFrames);
document.getElementsByTagName("style")[0].appendChild(textNode);
}

Answer 4

我处理这个的方法是不设置我在css文件中操作的元素样式的from或to，并且在触发动画之前我将设置它应该用javascript去的元素样式。 通过这种方式，您可以自由地动态管理应该执行的操作，直到我们可以直接在js中管理它。 您只需指定两者中的一个。 setTimeout允许在触发动画之前将css规则应用于元素，否则您将具有竞争条件并且不会设置动画。


#someDiv.slideIn {
    -webkit-animation: slideIn 0.5s ease;
}

@-webkit-keyframes slideIn {
    0% {
        left:0px;
    }

    100% {}
}


var someDiv = document.getElementById('someDiv');
someDiv.style.left = '-50px';
setTimeout(function(){
    someDiv.addClass('slideIn');
},0);

Answer 5

为了解决这个问题，我在我的CSS选择器中添加了一个“webkit动画名称”，然后为我的选项创建了单独的规则，在我的示例中为红色和黄色：

.spinner {
-webkit-animation-name: spinnerColorRed;
}

@-webkit-keyframes spinnerColorRed {
  from {
    background-color: Black;
  }
  to {
    background-color: Red;
  }
}

@-webkit-keyframes spinnerColorYellow {
  from {
    background-color: Black;
  }
  to {
    background-color: Yellow;
  }
}

然后使用jQuery：

$("#link").click(function(event) { 
  event.preventDefault();
  $(".spinner").css("-webkit-animation-name", "spinnerColorYellow");
});

Answer 6

是的，有一种方法可以用 JavaScript 动态地做到这一点。 您可以通过函数Element.animate()<\/a>在本机 javascript 代码中使用 css 动画指令。 这种方法在浏览器中得到广泛支持，除了 IE。

document.getElementById("tunnel").animate([
  // keyframes
  { transform: 'translateY(0px)' },
  { transform: 'translateY(-300px)' }
], {
  // timing options
  duration: 1000,
  iterations: Infinity
});

"使用 JavaScript 设置 webkit-keyframes from\/to 参数"

问题描述

6 个解决方案

解决方案1
11 2012-11-16 20:05:53

解决方案2
11 已采纳 2010-07-26 11:20:26

解决方案3
5 2014-12-08 02:24:51

解决方案4
4 2011-07-05 19:45:55

解决方案5
1 2011-06-11 20:56:27

解决方案6
0 2022-01-25 18:09:44

"使用 JavaScript 设置 webkit-keyframes from\/to 参数"

问题描述

6 个解决方案

解决方案1 11 2012-11-16 20:05:53

解决方案2 11 已采纳 2010-07-26 11:20:26

解决方案3 5 2014-12-08 02:24:51

解决方案4 4 2011-07-05 19:45:55

解决方案5 1 2011-06-11 20:56:27

解决方案6 0 2022-01-25 18:09:44

解决方案1
11 2012-11-16 20:05:53

解决方案2
11 已采纳 2010-07-26 11:20:26

解决方案3
5 2014-12-08 02:24:51

解决方案4
4 2011-07-05 19:45:55

解决方案5
1 2011-06-11 20:56:27

解决方案6
0 2022-01-25 18:09:44