CSS变换旋转在Internet Explorer 11中无法正常工作

Question

CSS变换旋转在Internet Explorer 11中无法正常工作

3

我写了一个应用程序，用于为文本元素添加动画效果（每个字母都在 span 元素内）。

我在 Internet Explorer 11 中看到了以下奇怪的效果（在 Chrome 中一切正常）：

情景 1：

letters
   .style("-webkit-transform", "rotate(-0deg) scale(.001)")
   .style("-ms-transform", "rotate(-0deg) scale(.001)")
   .style("-mozilla-transform", "rotate(-0deg) scale(.001)")
   .style("transform", "rotate(-0deg) scale(.001)")
   .transition()
   .style("-webkit-transform", "rotate(-720deg) scale(1)"); 
   .style("-ms-transform", "rotate(-720deg) scale(1)"); 
   .style("-mozilla-transform", "rotate(-720deg) scale(1)")
   .style("transform", "rotate(-720deg) scale(1)");

我的意图：显示几乎看不见的字母（scale.001），并将它们旋转两次，同时过渡到常规大小。
我的方法：据我所知，这似乎是正确的方法。（您在这里看到的是d3.js版本的过渡，这对我的理解没有影响）。首先为一些不支持常规transform属性的浏览器添加前缀的transform CSS样式。在这些浏览器实现所需的属性后，应通过常规属性（无前缀）调用它。因此，最后应调用常规属性以确保正常行为。
结果：
在Chrome中，这很好用，但在IE 11中，缩放过渡有效，但没有旋转。

场景2：

（只使用transform的前缀版本，删除常规裸露的transform）

letters
   .style("-webkit-transform", "rotate(-0deg) scale(.001)")
   .style("-ms-transform", "rotate(-0deg) scale(.001)")
   .style("-mozilla-transform", "rotate(-0deg) scale(.001)")
   .transition()
   .style("-webkit-transform", "rotate(-720deg) scale(1)"); 
   .style("-ms-transform", "rotate(-720deg) scale(1)"); 
   .style("-mozilla-transform", "rotate(-720deg) scale(1)");

这不应该是正确的方法，因为IE 11已经实现了transform。然而，这会产生正确的结果（对于IE 11）。

场景3：

我刚刚在Internet Explorer 11中打开了网站： https://css-tricks.com/almanac/properties/t/transform/ 那里的“常规”CSS transform旋转按预期显示。那些例子嵌入在Codepen中。

我有以下问题：

为什么场景1在IE 11中不起作用？（也尝试过各种更改但没有效果，例如只旋转而不缩放等）？

场景2可以工作，但似乎不是正确的方法，因为我必须省略常规的transform属性。我不追求这条路是对的吗？

在场景3中，常规的transform功能良好，唯一的区别似乎是它被嵌入在Codepen中。这是什么原因-是否有助于我们找到一个解决方案来回答问题1（应在Web服务器上运行而不是在codepen上）？

p.s. 在stackoverflow中我找到了这个相关的问题（在IE11中旋转和缩放不起作用），但它没有帮助。

更新5月30日

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <style>
      span {display: inline-block;}
    </style>
  </head>
 
  <body>
    <script>
      var letters1 = d3.select("body")
        .selectAll("span.notWorking")
        .data("Hello stackoverflow!")
        .enter()
        .append("span")
        .attr("class", "notWorking");
     
      //this is desirable but doesn't work in IE11:
      // transform rotate doesn>'t work, but e.g. transform scale does
      letters1
        .style("-ms-transform", "rotate(0deg)")
        .style("transform", "rotate(0deg)")
        //.style("transform", "scale(0.01)")
        .text(function(d){return d;})
        .transition()
        .style("-ms-transform", "rotate(720deg)")
        .style("transform", "rotate(720deg)");
        //.style("transform", "scale(1)");
       
      var letters2 = d3.select("body")
        .selectAll("span.working")
        .data("Hello stackoverflow!")
        .enter()
        .append("span")
        .attr("class", "working");
     
      //this is not desirable (since the regular transform can't be used) but works in IE11:
      letters2
        .style("-ms-transform", "rotate(0deg)")
        .text(function(d){return d;})
        .transition()
        .style("-ms-transform", "rotate(720deg)");
    </script>
  </body>
</html>

任何帮助都将不胜感激！

- ee2Dev

1

我看到“Internet Explorer”就为你感到难过了... - Radmation

1

好的。最好能够准备一个能够重现问题的代码片段，也就是所谓的 [mcve]。您可以使用 Stack Snippets（编辑器中的图标看起来像页面中的 <>），它类似于 jsfiddle.net、CodePen 等工具。 - Heretic Monkey

1

我刚试着重现了你的问题。我无法让任何浏览器对像这样的<span>A</span>这样的跨度应用变换请参见此处。但是，使用一个div，IE11和Chrome做了同样的事情。我和@MikeMcCaughan一样，需要看到一些可重现的代码。 - Mark

@mark：我在上面添加了一个完整但最小的示例，展示了我在IE 11中遇到问题。我选择的代码使用d3.js，但这应该是无关的，它应该归结为css transform rotate样式属性。 - ee2Dev

“在第三种情况下，常规转换效果良好，唯一的区别似乎是它嵌入了Codepen。” - 我认为你忽略了一个重要的区别...在codepen中，属性是通过样式表中的类应用的，而你正在尝试逐个设置它们，通过JavaScript逐位进行设置-由于值似乎是绝对静态的，你最好不要这样做。尝试将所有内容放入样式表中，然后通过动态添加触发此元素的类来应用它，并查看是否有所不同。 - CBroe

显示剩余6条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mark · Accepted Answer

我在任何浏览器中都无法使你的极简示例工作。 d3 在插值变换字符串时遇到了问题。相反，如果我使用 .tween 并手动进行插值，它似乎可以在IE11中工作（我尝试了chrome，IE11和Edge）：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <style>
      span {display: inline-block;}
    </style>
  </head>
 
  <body>
    <script>
      var letters1 = d3.select("body")
        .selectAll("span.working")
        .data("Hello stackoverflow!")
        .enter()
        .append("span")
        .attr("class", "working");
     
      letters1
        .style("transform", "rotate(0deg)scale(0.01)")
        .text(function(d){return d;})
        .transition()
        .duration(2000)
        .tween("transform", function() {
          var node = d3.select(this), 
              s = d3.interpolateNumber(0.01, 1),
              r = d3.interpolateNumber(0, 720);
          return function(t) {
            node.style("transform", "rotate(" + r(t) + "deg)scale(" + s(t) + ")");
          };
        });
      
    </script>
  </body>
</html>