css - Chrome Font Awesome 图标过渡延迟

Question

由于这个 CSS 过渡，在导航栏中我有一个 FA 图标过渡效果的延迟:

.navbar-nav > li > a > p > i {
    font-size: 1.5em;
    transition: all 0.3s ease-out;
}

在(在 Chrome 上)之后执行:

.navbar-nav > li > a {
    text-align:center;
    color: #475347 !important;
    transition: all 0.3s linear;
}

导航栏:http://jsfiddle.net/wtpLphw1/

但我需要这个 .navbar-nav > li > a > p > i 的过渡，用于 FA 图标的收缩过渡效果，当向下滚动页面时。

JS:

$(window).scroll(function() {
    if ($(document).scrollTop() > 50) {
        $("nav").addClass("shrink");
    } else {
        $("nav").removeClass("shrink");
    }
});

CSS:

nav.shrink .navbar-nav > li > a > p > i {
    font-size: 1.1em;
}

我在 Firefox 或 Edge 上没有这个延迟问题。

但这是因为 Chrome 先执行 .navbar-nav > li > a 的转换，然后执行 .navbar-nav > li > a > p > i 的转换。 我们可以在 Chrome 上清楚地看到它，这个 fork 第一次转换有 1.3 秒:https://jsfiddle.net/767psdwt

有什么想法吗？谢谢。

Answer 1

如果我没理解错的话，你不必分别在文本和图标上创建动画，只需删除这个:

.navbar-nav > li > a > p > i {
    font-size: 1.5em;
    /*transition: all 0.3s ease-out;*/
}

我还减少了你的动画持续时间，仅供引用。

要保持字体缩放的动画，使用这个:

transition: font-size 0.3s ease-out;

https://jsfiddle.net/767psdwt/1/