js 动态改变 animation 的 keyframe

对动态数据作 循环轮播动画实现时遇到需 动态计算高度的问题

function findKeyframesRule(animName) {
      var rule;
      var ss = document.styleSheets;
      for (var i = 0; i < ss.length; ++i) {
          for (var x = 0; x < ss[i].cssRules.length; ++x) {

              rule = ss[i].cssRules[x];

              if (rule.name == animName && (rule.type== CSSRule.KEYFRAMES_RULE || ss[i].cssRules[j].type == CSSRule.WEBKIT_KEYFRAMES_RULE )){
                  return rule; // 可改为 console 查看当前页中所有动画属性值
              }
          }

      }

  }
  //删除旧的动画添加新的
  function change(selector,animName)
    {

        var keyframes = findKeyframesRule(animName);

        // 删除已经存在的开始和结束帧
        keyframes.deleteRule("0%");
        keyframes.deleteRule("100%");
        var clientWidth =  document.documentElement.clientWidth/2 || document.body.clientWidth/2 //此处为举例

        keyframes.insertRule("0% { -webkit-transform: translate("+clientWidth+"px); }");
        keyframes.insertRule("100% { -webkit-transform: translate(-"+clientWidth/2+"px); }");//结束移动屏幕一半

        // 重新指定动画名字使之生效
        document.querySelector(selector).style.webkitAnimationName = animName;
    }

function findAndChangeKeyFramesRule(objRule) {
        let rule,
        ss = document.styleSheets,
        cssStyleSheetIndexAni = 0,
        cssStyleRuleIndex = 0,
        cssKeyframesRule = 0,
        cssStyleSheetIndexSel = 0;

        for (let i = 0; i < ss.length; ++i) {
            for (let x = 0; x < ss[i].cssRules.length; ++x) {

                rule = ss[i].cssRules[x];
                if(rule.selectorText == objRule.selectorName){
                    cssStyleSheetIndexSel = i;
                    cssStyleRuleIndex = x;
                }
                if (rule.name == objRule.animName && (rule.type== CSSRule.KEYFRAMES_RULE || ss[i].cssRules[j].type == CSSRule.WEBKIT_KEYFRAMES_RULE )){
                    cssStyleSheetIndexAni = i;
                    cssKeyframesRule = x;
                }
            }
        }

        document.styleSheets[cssStyleSheetIndexSel].deleteRule(cssStyleRuleIndex);
        document.styleSheets[cssStyleSheetIndexAni].deleteRule(cssKeyframesRule);
        document.styleSheets[cssStyleSheetIndexSel].insertRule(objRule.animation, cssStyleRuleIndex);
        document.styleSheets[cssStyleSheetIndexAni].insertRule(objRule.aniKeyFrames, cssKeyframesRule);
    };

1. 在vue 中使用时，需注意 style 的 scope 属性，会自动添加 data-value的随机码，所以当用 animation-name 查询时，会查找不到当前值
   2.原文链接 参考文章来源