javascript - 到达屏幕顶部时，jquery/css过渡

当您位于页面顶部时，我会通过jQuery进行检测。当您到达页面顶部时，我会显示一个较大的徽标。当您不在屏幕顶部时，徽标会小一些。它的效果很好，但我想通过一点过渡使其变得流畅。但这似乎不起作用。

这是我的jQuery：

jQuery(window).scroll(function () {
        if (jQuery(window).scrollTop() >= 1) {
            jQuery('.navbar-brand>div').addClass('small-logo');
        } else {
            jQuery('.navbar-brand>div').removeClass('small-logo');
        }
});

这是我的CSS类：

.logo{
    margin-top: 10px;
    width: 250px;
    height: 125px;
    -webkit-transition: width 1s; /* Safari */
    -webkit-transition: height 1s; /* Safari */
    transition: width 1s;
    transition: height 1s;
}

.small-logo{
    width: 150px;
    height: 75px;
    -webkit-transition: width 1s; /* Safari */
    -webkit-transition: height 1s; /* Safari */
    transition: width 1s;
    transition: height 1s;
}

有人可以帮我这个小动画吗？

提前致谢！！

最佳答案

在规则中多次设置transition只会覆盖以前的规则（此外，如果您在两个类之一中删除某个属性，该属性将不会显示动画，则必须声明新值，因此应在top-margin中包含具有0值的第二条规则）

.logo{
    margin-top: 10px;
    width: 250px;
    height: 125px;
    -webkit-transition: width 1s, height 1s; /* Safari */
    transition: width 1s, height 1s;
}

.small-logo{
    margin-top:0;
    width: 150px;
    height: 75px;
    -webkit-transition: width 1s, height 1s; /* Safari */
    transition: width 1s, height 1s;
}

尽管保留初始类并仅切换一个新类进行更改（仅在两个状态之间进行更改的属性），这甚至会更加干净。

jQuery(window).scroll(function () {
    jQuery('.navbar-brand > .logo').toggleClass('small', jQuery(window).scrollTop() >= 1);
});

和

.logo{
    margin-top: 10px;
    width: 250px;
    height: 125px;
    -webkit-transition: width 1s, height 1s; /* Safari */
    transition: width 1s, height 1s;
}

.logo.small{
    margin-top:0;
    width: 150px;
    height: 75px;
}

关于javascript - 到达屏幕顶部时，jquery/css过渡，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36746982/