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上清楚地看到它，第一次转换时这个分支有1.3秒：{{3} }

有什么想法吗？感谢。

Answer 1

如果我理解正确，你不必分别在文字和图标上创建动画，只需删除它：

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

我也缩短了你的动画时长，只是fyi。

要保留字体缩放的动画，请使用：

transition: font-size 0.3s ease-out;

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

Chrome延迟了字体真棒图标转换

1 个答案: