Question

您好我的动画问题就是停止在IE和EDGE中运行（在Chrome中很好）。

我在“文本之后”收到警告但是“textone1”等的不透明度仍然在开发工具中保持为0，而IE只是完全停止动画。

我在IE中遇到控制台错误“对象不支持属性或方法'getCTM' - snap.svg-min.js（19,26680）”这是我在Chrome中无法获得的。

以下是运行时停止的代码：

HTML：

<g xmlns="http://www.w3.org/2000/svg" id="text" style="opacity: 1;" transform="matrix(1 0 0 1 -70 -150)">
<text id="XMLID_2_">
  <tspan class="st1 st2 bold textone1" style="opacity: 0;" x="-20" y="0">TEXT1</tspan>
  <tspan class="st3 st2 textone2" style="opacity: 0;" x="74" y="0">TEXT2</tspan>
  <tspan class="st3 st2 textone3" style="opacity: 0;" x="15" y="50">TEXT3</tspan>
  <tspan class="st4 st2 bold textone4" style="opacity: 0;" x="305" y="50">TEXT4</tspan>
  <tspan class="st3 st2 textone4" style="opacity: 0;" x="640" y="50">.</tspan>
</text>
</g>

JS：

var text = s.selectAll("#text");
var textone1 = s.selectAll("#text .textone1");
var textone2 = s.selectAll("#text .textone2");
var textone3 = s.selectAll("#text .textone3");
var textone4 = s.selectAll("#text .textone4");

textone1.attr({
    opacity: 0
});
textone2.attr({
    opacity: 0
});
textone3.attr({
    opacity: 0
});
textone4.attr({
    opacity: 0
});

text.animate({
    transform: "t-290,-150",
    opacity:0,
}, 0, mina.easein, function() {
});

text.animate({
          transform: "t-70,-150",
          opacity: 1
        }, 0, mina.easeinout,function() {

          alert("after text");

        textone1.animate({
          transform: "t-290,-150",
          opacity: 1
        }, 500, mina.easeinout);

          textone2.animate({
            transform: "t-290,-150",
            opacity: 1
          }, 1000, mina.easeinout);

            textone3.animate({
              transform: "t-290,-150",
              opacity: 1
            }, 1000, mina.easeinout);

              textone4.animate({
                transform: "t-290,-150",
                opacity: 1
              }, 1000, mina.easeinout);

});

任何人都可以看到我可能做错了导致IE / EDGE停止吗？

提前致谢！

Answer 1

看起来@Ian指出了我正确的方向。

出于某种原因，IE不喜欢tspan元素的不透明度，我将这些应用于g标签并且工作正常。

爱IE的另一个原因：）

Snap.SVG EDGE / IE - jQuery Animation停止

1 个答案: