Anime.js和MathML

Question

我刚刚发现了anime.js，它给我的感觉就像一个适合我需要的工具(用2D动画化一些网络教程)。问题是我使用的是MathML ( HTML5标准的一部分)，它使用“数学”标记。

HTML

<math>
    <mrow>
        <msqrt>
            <mrow>
                <msup class="ml4">
                    <mi class="letter">b</mi>
                    <mn>2</mn>
                </msup>
            </mrow>
        </msqrt>   
    </mrow>
</math>

JS

<script type="text/javascript" src="anime.min.js"></script>
<script>
    anime.timeline({loop: true})
    .add({
        targets: '.ml4 .letter',
        opacity: [0, 1],
        scale: [0.2, 1],
        duration: 800
    });
</script>

当我试图简单地在数学标记(不透明、缩放、持续时间)中动画字母时，我得到：

如果我使用 (2.0)

在Firefox中

"TypeError: right-hand side of 'in' should be an object, got undefined" 
-> anime.min.js:9:136

在Safari

"TypeError: a.style is not an Object. (evaluating 'b in a.style')"
 -> "B" -> anime.min.js:9:145

如果我使用 (2.0)

在Firefox中

"TypeError: right-hand side of 'in' should be an object, got undefined"
-> anime.min.js:346:5

在Safari

"TypeError: a.style is not an Object. (evaluating 'b in a.style')"
-> "getCSSValue" -> anime.min.js:346

在这两种情况下，数学公式看起来都很好，但动画不起作用。我尝试了以前版本的anime.js，结果是一样的。

我玩了这些代码，动画又回来了，如果我去掉了“数学”标签，错误信息就会在Firefox和Safari上消失。但是，当然，数学公式是一个混乱，这是没有帮助的。但似乎这个问题仅仅与数学标签有关。我还试图对数学标记和内部标记进行样式化、取消样式，但错误仍然存在。

我可以理解，animate.js不支持这个标记，但是动画工作得很好，而且在我的Coda2 (web软件)上，在它自己的专用浏览器上没有任何错误。因此，这似乎非常依赖于浏览器，但到目前为止，它似乎是唯一认为脚本有效的浏览器。

我在网络上还没有发现任何能够同时解决anime.js和MathML的问题，所以很难判断这是一个错误还是一个错误。

谢谢。

https://jsfiddle.net/bt4u23rh/1/

Answer 1

您可以使用包装器，也可以修改animejs库上的函数animejs。基本上，该函数为该特定目标查找style属性。

function getCSSValue(el, prop) {
  if (prop in el.style) {
    return getComputedStyle(el).getPropertyValue(stringToHyphens(prop)) || '0';
  }
}

当代码到达if行时，您的mi .letter没有该属性，对函数的调用失败并出现气泡。

使用建议的解决方法，您可以创建一个包含div标记的mathML：

<div class="letterWrapper">
<math>
  <mrow>
    <msqrt>
      <mrow>
        <msup class="ml4">
          <mi class="letter">b</mi>
          <mn>2</mn>
        </msup>
      </mrow>
    </msqrt>   
  </mrow>
</math>
</div>

https://jsfiddle.net/bt4u23rh/2/