::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;

这应该适用于每个浏览器。

除此之外，您可以在选中#nav-toggle 时尝试为导航指定width 值，即使它与为.nav 提供的值相同。

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