我试图动态删除规则,然后在其中添加一个新规则,以获得动态变化的div innerHTML的计算动画。
var ss = document.styleSheets ;
for(j=0;j<ss[0].cssRules.length;j++)
if(ss[0].cssRules[j].name == "slide")
{
ss[0].deleteRule(j);
break;
}
ss[0].addRule('@keyframes slide', 'from {top:0px;} to {top:-300px;}', 0);
上面的代码应删除css动画并插入一个新动画。问题是'@'字符,如果我删除代码传递,但它不是动画,因为它没有'@keyframes'标识符。我这样做的原因是因为你没有用于ie11的css中的变量,你不能改变样式表csstext!所以我想删除整个规则并插入一个新规则。我所要做的就是动态改变这条规则:
@keyframes slide {
from {top:0px;}
to {top:-100px;}
}
以此规则为例:
@keyframes slide {
from {top:0px;}
to {top:-300px;}
}
尝试和处理ie的特殊世界真是一种痛苦!谢谢你的帮助。
我已经测试了你的代码并试图找出它在IE中不起作用的原因。但我找不到合理的理由。看起来你提到的IE浏览器无法用@读取关键字。我刚刚发现一个解决方法是自定义一个函数来添加属性。这是我的工作演示。
CSS
<style>
div {
margin-top: 500px;
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
}
@keyframes mymove {
from {
top: 0px;
}
to {
top: 200px;
}
}
</style>
HTML
<script>
function insertStyleSheetRule(ruleText) {
let sheets = document.styleSheets;
if (sheets.length == 0) {
let style = document.createElement('style');
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);
}
let sheet = sheets[sheets.length - 1];
sheet.insertRule(ruleText, sheet.rules ? sheet.rules.length : sheet.cssRules.length);
}
insertStyleSheetRule("@keyframes mymove{from {top:0px;} to {top:-300px;}}");
insertStyleSheetRule("div {margin-top: 500px;width: 100px;height: 100px;background: red;position: relative; animation: mymove 5s infinite;- webkit - animation: mymove 5s infinite;}");
</script>