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变换的顺序时，两个不同的浏览器会显示完全相反的结果。我知道变换的顺序会影响最终结果（虽然我认为在这种情况下它不应该），但我不明白为什么这样的兼容性＆＃39;通过切换顺序来反转。

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

在Safari中运行，在Firefox中破解： http://codepen.io/Dimiter/pen/jrBqry
在Safari中破解，可在Firefox中使用：http://codepen.io/Dimiter/pen/vKxGRY

正确，有效的动画：

动画破碎：

提前多多感谢！

Answer 1

感谢您的提问。这对Firefox来说是一个非常有趣的问题。我测试了两个案例，实际上webkit对你的代码没有任何问题，而firefox错放了元素。

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

无论哪种方式，我都能通过addind -moz-transition属性帮助你的汉堡包成为firefox中的一个十字架，并为变换提供一些不同的值。

尝试将代码更新为此，并告诉我它是否解决了您的问题：）

protected void Button1_Click(object sender, EventArgs e)
{
    string FilterExpression = string.Concat(DropDownList1.SelectedValue, " LIKE '%{0}%'"); 
    SqlDataSource1.FilterParameters.Clear();
    SqlDataSource1.FilterParameters.Add(new ControlParameter( DropDownList1.SelectedValue, "TextBox1", "Text" ));
    SqlDataSource1.FilterExpression = FilterExpression;
}

还要记住在没有空格的情况下写入负值。所以喜欢这个“ - 7px”而不喜欢这个“ - 7px”

Answer 2

对于另一个答案来说有点晚了，但是对KUTE.js Plugin尝试变换，你不会失望。

SVG CSS转换动画，跨浏览器问题

2 个答案: