Chrome 延迟字体很棒的图标转换

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.的过渡.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/