宽度转换为:: 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经常遇到有最大宽度/高度的过渡问题。