Javascript 如何在更改div样式时进行平滑更改

我有一个javascript函数，当导航栏到达顶部时，它会改变导航栏的高度，当用户向下滚动时，它会变小

function fixIfScrolled() {

    if (window.scrollY == nav.offsetTop) {
        document.getElementById("nav").classList.add("largerNavbar");
    } else {
        document.getElementById("nav").classList.remove("largerNavbar");
    }
}

window.onscroll = function() { fixIfScrolled() };

因此，它基本上是在类到达最顶端时添加类

它可以工作，但会立即改变。我想在调整大小时进行平滑过渡。我如何做到这一点，没有jquery是否可以做到这一点

编辑：

CSS

---

对条形图使用转换，并使用类而不是id，因为id的优先级高于类，所以

largerNavbar

的高度样式不会覆盖id的高度样式：

.nav {
overflow: hidden;
background-color: #333;
transition: height 0.8s;
-moz-transition:height 0.8s; /* Firefox 4 */
-webkit-transition:height 0.8s; /* Safari and Chrome */
-o-transition:height 0.8s;
}

var a=document.querySelector（'.nav'）；
a、 addEventListener（'click'，函数（e）{
setTimeout（函数（）{
a、 添加（“大导航栏”）；
}, 0);
})

.nav
{
宽度：100px；
高度：50px；
背景：蓝色；
过渡：高度1s；
-moz转换：高度1s；/*Firefox 4*/
-webkit过渡：高度1s；/*Safari和Chrome*/
-o型过渡：高度1s；/*Opera*/
}
拉格纳夫巴先生{
高度：150像素；
}

单击顶部div。

对条形图使用转换，并使用类而不是id，因为id的优先级高于类，所以

largerNavbar的高度样式将不会覆盖id的高度样式：

.nav {
overflow: hidden;
background-color: #333;
transition: height 0.8s;
-moz-transition:height 0.8s; /* Firefox 4 */
-webkit-transition:height 0.8s; /* Safari and Chrome */
-o-transition:height 0.8s;
}


var a=document.querySelector（'.nav'）；
a、 addEventListener（'click'，函数（e）{
setTimeout（函数（）{
a、 添加（“大导航栏”）；
}, 0);
})
.nav
{
宽度：100px；
高度：50px；
背景：蓝色；
过渡：高度1s；
-moz转换：高度1s；/*Firefox 4*/
-webkit过渡：高度1s；/*Safari和Chrome*/
-o型过渡：高度1s；/*Opera*/
}
拉格纳夫巴先生{
高度：150像素；
}

单击顶部div。
你的css在哪里？了解变换也可以复制也可以了解如何使用变换而不是仅使用高度来获得更好的FPS。你的css在哪里？了解变换也可以复制也可以了解如何使用变换而不是仅使用高度来获得更好的FPS。谢谢，但它不起作用。当它到达顶部时，它会变成更大的NavBar类，没有平滑的过渡。如果我们试图使用过渡，我们应该如何添加“在顶部时”条件？你定义了导航的初始高度了吗？我只是添加了高度并测试了它，但不起作用。哦，我明白了，类的样式不能覆盖id的样式，所以dom的高度不会改变。请看我的示例。对于两个类，转换是可以的。谢谢，但它不起作用。当它到达顶部时，它会变成更大的NavBar类，没有平滑的过渡。如果我们试图使用过渡，我们应该如何添加“在顶部时”条件？你定义了导航的初始高度了吗？我只是添加了高度并测试了它，但不起作用。哦，我明白了，类的样式不能覆盖id的样式，所以dom的高度不会改变。请看我的示例。对于两个类，转换是可以的。