宽度转换为:: after伪元素在Edge中不起作用

Question

我在::after伪元素上使用CSS转换,它在Chrome和Firefox中运行得非常好; 然而,它在Edge中没有像预期的那样工作.背景颜色过渡正在处理伪元素,但宽度不是.

这是我目前的代码:http://codepen.io/anon/pen/ZbYKwv？editors = 110

为了能够清楚地看到过渡,我将持续时间从400毫秒增加到4000毫秒.我还添加了一个白色背景,<label>因为Edge没有接缝来支持背景图像的数据URI SVG(我实际上是在使用文件,但我无法将其上传到CodePen).

那么我该怎样做才能使伪元素的宽度像Edge上预期的一样动画？

Answer 1

尝试在转换规则中添加所有浏览器的前缀：

-webkit-transition: all 4000ms ease;
-moz-transition: all 4000ms ease;
-ms-transition: all 4000ms ease;
-o-transition: all 4000ms ease;
transition: all 4000ms ease;

这应该可以在每个浏览器上进行转换。

除此之外，您可以尝试在检查width时为导航指定一个值#nav-toggle，即使它与为 给定的值相同.nav。

IE 和 FF 经常会遇到最大宽度/高度转换问题。