Html .addClass/.removeClass CSS动画不工作

我一直在尝试使用jqueryanimate和CSS，但是我似乎无法让它工作

  $(function() {
    var navShrink = $("#nav-anim");
    $(window).scroll(function() {
      var scroll = $(window).scrollTop();

      if (scroll >= 500) {
        navShrink.removeClass("navigation").addClass("nav-shrink");
      } else {
        navShrink.removeClass("nav-shrink").addClass("navigation");
      }
    });
  });

css

html，但我遗漏了我所有的内容

<div id="nav-anim" class="row navigation fixed-top no-gutters">

</div>

这段代码有效，它将我的导航条高度缩小到500px之后。然而，它没有过渡。我只是想减轻身高的变化。它要更改到的每个类都有不同的“高度”属性集

---

想知道在没有jquery ui的情况下是否有办法做到这一点。

您可以在CSS中添加以下行：

.navigation,
.nav-shrink {
    -webkit-transition: background-color 0.4s;
    -moz-transition: height 0.4s;
    -o-transition: height  0.4s;
    -ms-transition: height  0.4s;
    transition: height  0.4s;
}

---

删除

！重要信息

规则，以免覆盖样式。这应该是最佳做法

更新：添加了不使用jQuery的代码段

const navShrink=document.querySelector（'.navigation__容器'）；
document.onscroll=shrinkNavigation=>window.pageYOffset>=500？navShrink.classList.add（'nav-shring'）：navShrink.classList.remove（'nav-shring'）
正文{
保证金：0；
}
.科{
高度：3000px；
背景颜色：浅灰色；
}
.navigation\u容器{
位置：粘性；
排名：0；
背景色：深蓝色；
高度：12.5vh；
显示器：flex；
对齐项目：居中；
过渡：所有0.4s缓解；
}
.导航收缩{
高度：7vh；
}
.菜单{
列表样式：无；
}
.nav-shrink.menu\u项--ANCHORK{
颜色：白色；
}
.菜单{
显示器：flex；
flex:1自动；
证明内容：周围的空间；
}








你能分享你的HTML和CSS吗？注意：1。您不需要删除类，只需在
#nav anim
中添加高度，然后用新高度切换类
nav shrink
。2.删除取消装配
！重要信息
，因为新类在css中较低，因此将应用新高度。3.concider说这个功能可以在没有jQuery的情况下实现。@MilošMiljković我的家伙。就是这样！导致问题的重要原因。固定的。只是简单地删除了重要的内容。我的大脑一直在崩溃，我在过去至少做过10次这样的事情，但都没有问题，这次没有！都是因为我无缘无故添加了一个重要的！！！！“非常感谢。”约书亚·康塞德赞同我的回答。还有一个工作示例，我更新了questionNice非jQuery解决方案！
.navigation,
.nav-shrink {
    -webkit-transition: background-color 0.4s;
    -moz-transition: height 0.4s;
    -o-transition: height  0.4s;
    -ms-transition: height  0.4s;
    transition: height  0.4s;
}