IE11 中的 deleteRule CSSKeyframesRule 方法令人困惑的行为答案

【问题标题】：deleteRule CSSKeyframesRule method confusing behaviour in IE11IE11 中的 deleteRule CSSKeyframesRule 方法令人困惑的行为
【发布时间】：2018-03-06 05:38:30
【问题描述】：

我使用 css @keyframes 创建了一个圆形的基本动画。我正在使用 javascript 通过在圆圈内单击来触发动画开始/停止。

动画本身可以分为 5 个（循环）阶段：
pause-expand-pause-shrink-pause（参见下面的@keyframes css 部分）

我最终想要实现的目标是能够设置动画持续时间并更改关键帧的值（例如通过输入字段来暂停和扩展/缩小持续时间 - 细节对于这个问题）。我已经组合了一个 JavaScript 函数来执行此任务，并将其设置为 onload 只是为了测试它是如何工作的。

我的 HTML：

<!doctype html>
<html>
    <head>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <meta content="utf-8" http-equiv="encoding">

        <link rel="stylesheet" href="style.css">
        <script src = "animation.js"></script>

    </head>
    <body onload=setAnimationDuration(1,1)>
        <div id="circle" class='circle-paused' onclick=cssAnimation()></div>
    </body>
</html>

我的 CSS：

#circle {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}

.circle-paused {
width: 9%;
padding-top: 9%;
border-radius: 50%;
background-color: #800080;
margin: auto;
}

.circle-animated {
/* 2 sec pause 4 sec expand_shrink*/
width: 9%;
padding-top: 9%;
-webkit-animation-name: my-circle; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 12s; /* Safari 4.0 - 8.0 */
animation-name: my-circle;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
border-radius: 50%;
margin: auto;
}

@keyframes my-circle {
0% {background-color: #800080; width: 9%; padding-top: 9%;}
33.3% {background-color: #D8BFD8; width: 28%; padding-top: 28%;}
50% {background-color: #D8BFD8; width: 28%; padding-top: 28%;}
83.3% {background-color: #800080; width: 9%; padding-top: 9%;}
100% {background-color: #800080; width: 9%; padding-top: 9%;}
}

我的 JavaScript：

function cssAnimation() {
  if (document.getElementById('circle').className == 'circle-paused') {
    document.getElementById('circle').className = 'circle-animated'
  } else {
    document.getElementById('circle').className = 'circle-paused'
  }
}


function findKeyframes(animation_name) {
  // get list of current keyframe rules
  var style_sheet = document.styleSheets;
  for (var i = 0; i < style_sheet.length; ++i) {
    for (var j = 0; j < style_sheet[i].cssRules.length; ++j) {
      // type 7 correspond to CSSRule.KEYFRAMES_RULE, for more info see https://developer.mozilla.org/en-US/docs/Web/API/CSSRule 
      if (style_sheet[i].cssRules[j].type == 7 && style_sheet[i].cssRules[j].name == animation_name) {
        return style_sheet[i].cssRules[j];
      }
    }
  }
  // keyframe rules were not found for given animation_name
  return null;
}


function getPercentage(total, fraction) {
  // Returns what percentage the fraction is from total
  // The result is rounded to 1 decimal place
  return Math.round(((100 / total) * fraction) * 10) / 10;
}


function setAnimationDuration(pause, expand_shrink) {
  var total_animation_duration = (pause * 2) + (expand_shrink * 2)
  var pause_percentage = getPercentage(total_animation_duration, pause)
  var expand_shrink_percentage = getPercentage(total_animation_duration, expand_shrink)

  var pause1 = pause_percentage + expand_shrink_percentage;
  var shrink = pause1 + expand_shrink_percentage;

  var frame_percentage_list = [0, expand_shrink_percentage, pause1, shrink, 100]

  var key_frame_list = findKeyframes('my-circle')
  var new_rule_list = []
  var to_be_removed_key_list = []

  //create array of new rules to be inserted
  //collecting old keys of rules to be deleted
  for(var i = 0; i < key_frame_list.cssRules.length; i++) {
    var current_rule = key_frame_list.cssRules[i].cssText

    to_be_removed_key_list.push(key_frame_list.cssRules[i].keyText)
    new_rule_list.push(current_rule.replace(/[+-]?([0-9]*[.])?[0-9]+%/, frame_percentage_list[i] + '%'))
  }

  // delete old rules
  for(var i = 0; i < to_be_removed_key_list.length; i++) {
    key_frame_list.deleteRule(to_be_removed_key_list[i])
  }

  // populate new ruels
  for(var i = 0; i < new_rule_list.length; i++) {
    key_frame_list.appendRule(new_rule_list[i])
  }


  document.getElementById('circle').style.animationDuration = total_animation_duration + "s"
}

Code above, on JSFiddle

问题本身：
该代码在 FireFox (55.0.3)、Chrome (61.0) 和 Safari (11.0) 中按预期工作。不过，当我开始在 IE11 中对其进行测试时，我发现 key_frame_list.deleteRule('rule_key') 会引发 Invalid argument 错误。在研究这个问题时，我发现了（并且经历了）this article（虽然它没有解决 IE 问题，但它提高了我对 css 动画的整体理解）。在 MSDN 上，我找到了两个参考资料，涉及 deleteRule：one 和 two。虽然我并没有真正理解是什么意思，在the second one，作者：

密钥必须解析为 0 到 1 之间的数字，否则规则将被忽略。

我假设在 IE 中您必须将索引传递给 deleteRule 而不是字符串键。所以我试图在 IE 控制台中检查我的假设。这是我发现的（鉴于我的 js 代码在 onload 中）：

var key_frame_list = findKeyframes('my-circle')
key_frame_list.cssRules.length => 5
key_frame_list.deleteRule(0)
key_frame_list.cssRules.length => 4
key_frame_list.deleteRule(1)
key_frame_list.cssRules.length => 3
key_frame_list.deleteRule(0)
key_frame_list.deleteRule(1)
key_frame_list.deleteRule(2)
...
key_frame_list.cssRules.length => 3

正在发生的事情是：

key_frame_list.deleteRule(0) - 删除第一条规则（即 0%）
key_frame_list.deleteRule(1) - 删除最后一条规则（100%）
之后，无论我将哪个索引传递给key_frame_list.deleteRule()，key_frame_list.cssRules.length 仍然是 3。
我的期望是我将能够使用key_frame_list.deleteRule(0) 重复并删除所有规则（正如我预期的那样，每次删除规则后索引都会发生变化）。

现在，我想了解：

在 IE 中使用 deleteRule 的正确方法是什么（基本上是“我做错了什么？”）（或者是否应该使用其他方法）？
为什么我不能删除超过五条规则中的两条？
是否有适合此目的的方法可以在 Firefox、Chrome 和 IE11 上使用相同的参数，我不知道？

【问题讨论】：

标签： javascript css internet-explorer css-animations internet-explorer-11

【解决方案1】：

在 IE 中使用 deleteRule 的正确方法是什么（基本上是“我做错了什么？”）（或者是否应该使用其他方法）？
为什么我不能删除超过五条规则中的两条？

第一个 MSDN 链接不适用； deleteRule() 方法适用于顶级规则，而不是关键帧规则。

文本“密钥必须解析为 0 到 1 之间的数字，否则规则将被忽略。”从第二个链接实际上取自2013 WD of css-animations，这意味着Internet Explorer 需要一个代表百分比的十进制数字，而不是包含0%-100% 关键帧选择器的字符串。该参数不代表索引。

所以对于 0% 关键帧规则，IE 期望值为 0；对于 100% 关键帧规则，IE 期望值为 1；对于 33.3% 的关键帧规则，IE 期望浮点值 0.333：
```
key_frame_list.deleteRule(0)     // Deletes the 0% keyframe rule
key_frame_list.deleteRule(0.333) // Deletes the 33.3% keyframe rule
key_frame_list.deleteRule(1)     // Deletes the 100% keyframe rule
```
一旦 0% 规则被删除，如果没有 0% 规则保留，那么对 deleteRule(0) 的额外调用将不起作用。

而且由于关键帧不能超过 100%，deleteRule(2) 是没有意义的，因为它意味着删除一个 200% 的关键帧规则，而该规则不存在。
是否有适合此目的的方法可以在 Firefox、Chrome 和 IE11 上使用相同的参数，我不知道？

没有； Internet Explorer 11 遵循 2013 WD（它本身是在 Internet Explorer 10 发布后于 2012 年至 2013 年之间开发的），这意味着它的实现与当前标准不一致，其中the deleteRule() method has been changed to accept a string argument instead of a numeric argument。

这意味着 API 不兼容，因此没有干净的解决方法。你只需要尝试这两个论点。我changed在你的小提琴下面声明：
```
// delete old rules
for(var i = 0; i < to_be_removed_key_list.length; i++) {
  key_frame_list.deleteRule(to_be_removed_key_list[i])
}
```
到：
```
// delete old rules
for(var i = 0; i < to_be_removed_key_list.length; i++) {
  try {
    key_frame_list.deleteRule(to_be_removed_key_list[i])
  } catch (e) {
    key_frame_list.deleteRule(+(parseFloat(to_be_removed_key_list[i]) / 100).toFixed(3))
  }
}
```
+(parseFloat(to_be_removed_key_list[i]) / 100).toFixed(3) 位将百分比字符串转换为考虑舍入误差的数值。 IEEE-754 浮点数固有的舍入错误是 API 最初被更改的原因（并且与一直期望字符串的 appendRule() 方法保持一致），除了因为它只更改了一段时间在 Internet Explorer 11 发布之后，并且由于IE11 will no longer receive platform updates，这意味着 IE11 坚持使用其旧的 WD 实现（我必须强调，它在其开发时是最新的）。

【讨论】：