JS添加、删除@keyframes

@keyframes规则是用来定义css动画：

@keyframes name{
	0{
		/* 
		状态起始
		... ...
		left: 0;
		*/
	}
	50%{
		/* 
		状态起始
		... ...
		left: 50%;
		*/
	}
	100%{
		/* 
		状态起始
		... ...
		left: 100%;
		*/
	}
}

div{
    animation: name;
}

但有时动画的效果是需要计算动态生成的，这时我们就需要JS进行动态生成@keyframes规则。

解决思路:

• 首先我们需要获取css的样式表

  // 获取所有css样式表
  let styles = document.styleSheets;
  

  获取结果：

  StyleSheetList {0: CSSStyleSheet, 1: CSSStyleSheet, length: 2}
  

  这其实是一个Object类型而不是Array类型。StyleSheetList对象中的CSSStyleSheet就是一张样式表（按style、link标签为单位生成?）。

• 通过CSSStyleSheet的insertRule(rule [, index])进行添加@keyframes

   // 设置 css
    document.styleSheets[0].insertRule(
      "@keyframes turn" +
        "{" +
        "0%{transform: " +
        "rotate(0);}" +
        "100%{transform: " +
        `rotate(${angle}deg)}` +
        "}"
    );
  

• 如果要删除css规则，则通过CSSStyleSheet的removeRule(index)即可。不过需要遍历一下CSSStyleSheet.name在查找需要删除rule的index

  let CSSRuleList = document.styleSheets[0].cssRules;
  
  for (var k in CSSRuleList) {
    if (CSSRuleList[k].name === "turn") {
       document.styleSheets[0].removeRule(k);
    }
  }