css - SVG CSS 变换动画，跨浏览器问题

Question

我正在为我正在构建的网站制作一个简单的汉堡包菜单 SVG 图标。为了让这个经常使用的图标不那么乏味，我认为在其中添加一些动画效果会很好。我决定让三个水平条旋转(每个单独)以形成一个十字。

当我在 Mac 上开发时，Safari 是我测试它的第一个浏览器，一切都完全按预期工作。但后来我决定在 Firefox 中打开同一个文件，发现动画被破坏了。在进一步调查这个问题时，我注意到反转应用于栏的 CSS 转换的顺序会产生完全相反的效果:Firefox 中的结果是完美的，而 Safari 中显示的图标不正确。

汉堡图标的简化代码:

<svg id="hamburger" viewBox="0 0 30 30" width="30" height="30">
  <rect id="top" x="0" y="8px" width="30" height="2"/>
  <rect id="middle" x="0" y="15px" width="30" height="2"/>
  <rect id="bottom" x="0" y="22px" width="30" height="2"/>
</svg>

动画添加到 Sass 文件中，代码如下:

#top,
#middle,
#bottom {
  transform-origin: center;
  transform: none;
  transition: transform .5s ease;
}

#hamburger.active {
  #top {
    transform: translateY(7px) rotate(45deg);
  }
  #middle {
    transform: rotate(135deg);
  }
  #bottom {
    transform: translateY(- 7px) rotate(45deg);
  }
}

奇怪的是，当 translate 和 rotate 变换的顺序调换时，两种不同的浏览器显示完全相反的结果。我知道转换的顺序会影响最终结果(尽管我认为在这种情况下不应该)，但我不明白为什么通过切换顺序会颠倒“兼容性”。

我用上面的代码创建了 2 个几乎相同的 Codepen 示例。唯一的区别是 translate 和 rotate 转换的顺序:

• 在 Safari 中工作，在 Firefox 中损坏: http://codepen.io/Dimiter/pen/jrBqry
• 在 Safari 中损坏，在 Firefox 中工作:http://codepen.io/Dimiter/pen/vKxGRY

正确的工作动画:

动画损坏:

提前致谢!

Answer 1

感谢您的提问。 这是 Firefox 的一个非常有趣的问题。 我测试了这两种情况，确实 webkit 对您的代码没有问题，而 firefox 放错了元素。

我认为这可能是由于浏览器之间的转换源差异所致。

无论哪种方式，我都能够帮助您的汉堡包在 Firefox 中变成十字形，方法是添加一个 -moz-transition 属性，该属性具有一些不同的转换值。

尝试将您的代码更新为这个，并告诉我它是否解决了您的问题:)

#hamburger.active {
  #top {
    transform: translateY(7px) rotate(45deg);
    -moz-transform: translate(-5px,3px) rotate(45deg);
  }
  #middle {
    transform: rotate(135deg);
  }
  #bottom {
    transform: translateY(-7px) rotate(45deg);
    -moz-transform: translate(5px,-7px) rotate(45deg);
  }
}

还要记住写负值时不要有空格。所以像这样 "-7px" 而不是像这样 "- 7px"