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/