javascript動態改變css3的animation

木木_fth發表於2019-01-08
JavaScriptCSSS3

當元素含有animation屬性，並且現需要動態計算keyframe變化的值

動態改變keyframe

通過JavaScript動態改變animation的keyframe比較麻煩，造成此問題的原因也是受限於CSSOM的API，特別是定義了多個幀的frame時，js基本無法去在執行時動態改變,只能通過重寫styleSheets中的cssRule來實現

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;
              }
          }
      }
  }
//刪除舊的動畫新增新的
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;
}
複製程式碼

此段程式碼對於未跨域link引入的css是可以生效,但是對於跨域的css在chrome下findKeyframesRule會取不到cssRule

設定cssRule

  • addRule(selector, rules, [index]) IE
  • deleteRule(index) FireFox
  • insertRule(rule, index) FireFox
  • removeRule([index]) IE

相關文章