1

我正在尝试使用 CSS3 过渡创建选定或悬停菜单效果。我通过同时为border-left-width和padding-left设置动画来做到这一点。边框增加了 6 像素，内边距减少了 6 像素，速度均为 0.3 秒。

在 Chrome 中，两者的动画速度相同并且看起来很流畅。在 IE 中，过渡是即时的（显然没有过渡/动画），并且看起来不错。在 Firefox 中，边框和内边距同时动画，但它出现在不同的时间间隔或其他东西上，使文本和容器四处弹跳，看起来很紧张。

这是一个 Fiddle 示例： http: //jsfiddle.net/crisp330/w7phH/1/ （查看 FF 和 Chrome 之间的区别？）

有没有办法让 FireFox 像 Chrome 一样流畅地制作动画？我知道我可以使用替代方法，例如在 LI 中定位另一个元素并为其设置动画……但是这种方法太干净了！

这是 CSS3 过渡的主要内容（有关工作示例，请参见 jsFiddle）：

ul li {
    padding-left: 12px;
    border: 0 none;
}

ul li:hover {
    padding-left: 6px;
    border-left: 6px solid #d17519;
    transition: border-left-width .3s, padding-left .3s;
    -moz-transition: border-left-width .3s, padding-left .3s;
    -webkit-transition: border-left-width .3s, padding-left .3s;
    -o-transition: border-left-width .3s, padding-left .3s;
}
4

2 回答 2

3

您真正的问题是 Firefox 允许非整数像素填充值，但仅允许整数设备像素边框值（因为事实证明网页依赖于整数宽度的边框）。Chrome 将两者都强制为整数像素，所以事情就在那里解决了。目前。直到他们开始进行亚像素填充。但是在 Firefox 中，只要边框从略小于半整数变为略大​​于半整数，就会出现 1-device-px 反弹。

不幸的是，这里真的没有一个很好的解决方案。例如，请参阅http://robert.ocallahan.org/2008/01/subpixel-layout-and-rendering_22.html以了解 WebKit 方法导致的问题的描述。

于 2012-10-31T06:12:07.153 回答
3

显然，它周围有一个 hack，即为 firefox 添加一些旋转。然而，该解决方案在最终输出中提供了轻微的旋转，但提供了平滑的过渡。

ul li:hover {
    -moz-transform: rotate(0.02deg);
}

取自本网站的解决方案

于 2019-12-13T06:51:41.187 回答