使用 JavaScript 设置 webkit-keyframes from/to 参数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3328933/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set the webkit-keyframes from/to parameter with JavaScript
提问by Ricardo
Is there any way to set the fromor toof a webkit-keyframe with JavaScript?
有没有办法用 JavaScript设置webkit-keyframe的from或to？
采纳答案by Adam Heath
A solution of sorts:
各种解决方案：
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);
Just adds a style definition to the header. Would be much cleaner/better to define it though the DOM if possible.
只需向标题添加样式定义即可。如果可能的话，通过 DOM 定义它会更清晰/更好。
Edit: Error in Chrome with old method
编辑：使用旧方法在 Chrome 中出错
回答by Matthew Wilcoxson
You can use the CSS DOM interface. For instance:
您可以使用 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>
回答by Darius Miliauskas
This example covers several different browsers:
这个例子涵盖了几个不同的浏览器：
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);
}
回答by mroy
The way I handle this is to not set either the from or to of the element style I am manipulating in the css file and before triggering the animation I will set the element style that it should go to with javascript. This way you are free to dynamically manage what stuff should do until we can manage this directly in js. You only need to specify one of the two. The setTimeout allows the application of the css rule to the element before the animation is triggered otherwise you would have a race condition and it wouldn't animate.
我处理这个问题的方法是不设置我在 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);
回答by Lucy Luge
To solve this I added a 'webkit animation name' to my CSS selector and then created separate rules for my options, in my example red and yellow colouring:
为了解决这个问题，我在 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;
}
}
Then using jQuery:
然后使用jQuery：
$("#link").click(function(event) {
event.preventDefault();
$(".spinner").css("-webkit-animation-name", "spinnerColorYellow");
});
